UtterAccess.com
X   Site Message
(Message will auto close in 2 seconds)

Welcome to UtterAccess! Please ( Login   or   Register )

Custom Search
 
   Reply to this topicStart new topic
> <a Href With Onclick Javascript To Change Div Display    
 
   
gunderj
post May 27 2014, 03:29 PM
Post#1



Posts: 194
Joined: 5-September 05



I have a div within an <a href issuing an onclick javascript function that makes changes to two other div's in the page. It follows a "learn more... show less... kind of logic where when the page loads the div called lowerContent is displayed, and the a href div text is Show Less... When they click that div , a lowerContent div is hiddern and the button text is changed to Learn More...
HAs a newbie to CSS I got each piece working on its own, works great, but when I put it all together it does not work. The page loads with the lower div displayed and the text of Show Less... When you click the a<a href, it works - the lower div is hidden and the text changes to Learn More... But, when click a subsequent time (or any number of times) the lower div does not display (though all the other changes are working fine.
I have reduced the code to the below which is a minimum and hopefully some CSS expert her can help me? I have tried using the jquery toggle function which also does not work.
Thanks very much,
Jay
lt;!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dffsdf Document</title>
<style type="text/CSS">
#myContent {
height: 380px;
width: 400px;
margin-right: auto;
margin-left: auto;
border: 2px solid #5F2A2A;
font-size: 18px;
}
#myButton {
background-color: red;
float: right;
height: 28px;
width: 122px;
margin-right: 15px;
margin-top: 15px
margin-left: auto;
border: 0px solid #38D931;
}
:hover#myButton {
background-color: grey;
float: right;
height: 28px;
width: 122px;
margin-right: 15px;
margin-top: 15px
margin-left: auto;
border: 0px solid #38D931;
}
#lowerContent {
display: auto;
height: 100px;
width: 300px;
margin-right: auto;
margin-top: auto;
margin-left: auto;
border: 2px solid #38D931;
}
</style>
<script type="text/javascript">
function changeDisplay(){
var s = document.getElementById("myButton").innerHTML;
if (s == "Learn More...") {
document.getElementById("myButton").innerHTML = "Show Less...";
document.getElementById("myContent").style.height="480px";
document.getElementById("lowerContent").style.height="190px";
document.getElementById("lowerContent").hidden="true";
} else { //s will equal Show Less...
document.getElementById("myButton").innerHTML = "Learn More...";
document.getElementById("myContent").style.height="380px";
document.getElementById("lowerContent").style.height="100px";
document.getElementById("lowerContent").hidden="false";
}
}
</script>
</head>
<body>
<div id="myContent">
<ul>
<li> this is line one</li>
<li> this is line two</li>
<li>this is line three</li>
<li>this is line four<a id="myHref" href="#" onclick="changeDisplay();">
<div id="myButton">Show Less...</div>
</a>
</li>
</ul>
<div id="lowerContent"> lower content line one </div>
</div>
</body>
</html>
Go to the top of the page
 
jleach
post May 27 2014, 06:17 PM
Post#2


UtterAccess Editor
Posts: 9,812
Joined: 7-December 09
From: Staten Island, NY, USA


Unless you have any particular reason not to, I highly recommend using jQuery for this type of stuff. It's JavaScript, you download the file or link to it in your source, then use the jQuery syntax to access the library, and it's really, really easy to handle these types of changes with jQuery.
hanging actual CSS properties via JavaScript is usually not considered a clean practice. Instead, use jQuery's .AddClass() and .RemoveClass() methods to add and remove CSS classes (altering how it actually displays), or Show() and Hide() to show and hide elements...
The jQuery syntax takes a bit of getting used to, but once you have the basics it's a breeze:
CODE
$("#YourElementID").Show();
$("#YourElementID").Hide();
// or
var yourElement = $("#YourElementID");
yourElement.AddClass("SomeCSSClass);
yourElement.RemoveClass("SomeCSSClass")
yourElement.Show();
yourElement.Hide();
// etc etc

Usually I'm not too much a fan of extra libraries, but jQuery is really, really nice.
hth
Go to the top of the page
 
gunderj
post May 28 2014, 09:36 AM
Post#3



Posts: 194
Joined: 5-September 05



Thanks jquery did the trick.
The below works now.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dffsdf Document</title>
lt;style type="text/CSS">
#myContent {
height: 380px;
width: 400px;
margin-right: auto;
margin-left: auto;
border: 2px solid #5F2A2A;
font-size: 18px;
}
#myButton {
background-color: red;
float: right;
height: 28px;
width: 122px;
margin-right: 15px;
margin-top: 15px
margin-left: auto;
border: 0px solid #38D931;
}
:hover#myButton {
background-color: #DCD6D7;
float: right;
height: 28px;
width: 122px;
margin-right: 15px;
margin-top: 15px
margin-left: auto;
border: 0px solid #38D931;
}
#lowerContent {
display: none;
height: 100px;
width: 300px;
margin-right: auto;
margin-top: auto;
margin-left: auto;
border: 2px solid #38D931;
}
</style>
<script src="../jQueryAssets/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#myHref").click(function() {
$("#lowerContent").toggle("normal");
var s = document.getElementById("myButton").innerHTML;
if (s == "Learn More...") {
document.getElementById("myButton").innerHTML = "Show Less...";
document.getElementById("myContent").style.height="480px";
document.getElementById("lowerContent").style.height="190px";
document.getElementById("lowerContent").hidden="true";
} else { //s will equal Show Less...
document.getElementById("myButton").innerHTML = "Learn More...";
document.getElementById("myContent").style.height="380px";
document.getElementById("lowerContent").style.height="100px";
document.getElementById("lowerContent").hidden="false";
}
return false; //to keep page position
});
});
</script>
</head>
<body>
<div id="myContent">
<ul>
<li> this is line one</li>
<li> this is line two</li>
<li>this is line three</li>
<li>this is line four<a id="myHref" href="#">
<div id="myButton">Learn More...</div>
</a>
</li>
</ul>
<div id="lowerContent"> lower content line one </div>
</div>
</body>
</html>
Go to the top of the page
 


Custom Search
RSSSearch   Top   Lo-Fi    16th December 2017 - 01:37 PM