Hi all, so I want to create a news system only with JS. One of the core feature is to hide/show the content with buttons. As it is right now I have 2 questions:
1. When I click on any button nothing happen on the first click but everything work when you click twice?
2. I want to be able to Hide the content not only by month but also by date, I need help to start my function.
Thank a lot in advance. Here's my code everything is in one file.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="function.js" type="text/javascript" /><title>Test Javascript News</title><style>
h1{
font-size:14px;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
text-decoration:underline;
}
.month{
font-weight:bold;
font-size:14px;
padding:5px;
}
</style><script language="javascript"><!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//--></script></head><body><p><button onclick="showhide('january');">Show/hide me January</button></p><p><button onclick="showhide('february');">Show/hide me February</button></p><p><button onclick="showhide('March');">Show/hide me March</button></p><table width="524" height="396" border="1"><tr><td><b>Month</b></td><td><b>News</b></td><td><b>Date</b></td></tr><tr><td><span class="month">January</span></td><td><div id="january"><span class="news"><h1>title</h1><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span><span class="news"><h1>title</h1><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span><span class="news"><h1>title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span></div></td><td> </td></tr><tr><td><span class="month">February</span></td><td><div id="february"><span class="news"><h1>title</h1><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span><span class="news"><h1>title</h1><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span><span class="news"><h1>title</h1><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span></div></td><td> </td></tr><tr><td><span class="month">March</span></td><td><div id="March"><span class="news"><h1>title</h1><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span><span class="news"><h1>title</h1><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span><span class="news"><h1>title</h1><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla felis eros, fermentum vitae molestie id, placerat ac diam. Nam eget tempor tellus. In hac habitasse platea dictumst. Fusce ut eros tellus, eget rutrum enim. Nulla facilisi. Curabitur tempor blandit blandit. Donec sit amet libero vitae quam commodo malesuada et sit amet sapien. Quisque sed erat sem, at adipiscing risus. </p></span></div></td><td> </td></tr></table></body></html>
The problem in the code is "state" variable. It is set as a global variable and its default value is "none", so in the first click the function will not hide the opened section and it will only set the value of "state" to "block":
HTML Code:
else {
state = 'block';
And after the first click the state variable will will only reflect the state of the last element. So if you hided january, the variable "state" will be "none". Now if february is opened and you click to hide it what will happen is exactly what happened in the first click (it will only set the value of "state" to "block").
That's why you need to click twice.
The method that I apply to achive close/open is to define a class
HTML Code:
.hide {display:none;}
then I add or remove the class. I wrote a function for your code and tried it successfully:
HTML Code:
function addRemoveClass (cl,elm) {
elmClass= elm.className;
elmClasses= elmClass.split(' ');
classCkeck= false;
classItem=false;
for (var i=0; i<elmClasses.length; i++){
if (elmClasses[i]==cl){
classCkeck= true;
classItem= i;
break;
}
}
if (classCkeck) {
elmClasses[classItem]= null;
} else {
elmClasses.push(cl);
}
newClass= elmClasses.join(' ');
if (newClass.charAt(0)==' ') {
newClass= newClass.substring(1);
}
if (newClass.charAt(newClass.length-1)==' ') {
newClass= newClass.substring(0,newClass.length-1);
}
elm.className= newClass;
}
Now you only need to send the element and the class of hide to this function. Example:
Hide/Show content
Reply With Quote
Bookmarks