using javascript to do a class show/hide text

Question

JavaScript:

  function showOrHide()  
  { 
      var div = document.getElementByClass("showorhide"); 
      if (div.myDivClass.display == "block")  
      { 
          div.myDivClass.display = "none"; 
      } 
      else  
      { 
          div.myDivClass.display = "block"; 
      } 
  }

css:

.showorhide {
    display: none;
    padding: 12px 0px 12px 0px;
}

html:

<div align="left" style="padding-bottom:3px;"><font size="5">Chat Issues:</font></div>
<a href="javascript:showOrHide();"><font size="3">Are there any age requirements?</font></a> 
<ul style="margin:0px 0px 0px 0px;">
    <div class="showorhide">
        <li>Yes. You must be 13 years of age or older to use our chatrooms. Anyone under the age of 13 will be directed to a chatroom more suitable for their age.</li>
    </div>
</ul>
<a href="javascript:showOrHide();"><font size="3">Can i advertise in your chatroom? </font></a> 
<ul style="margin:0px 0px 0px 0px;">
    <div class="showorhide">
        <li>Absolutely not! Advertising is strictly prohibited and anyone caught advertising will be banned without warning.</li>
    </div>
</ul>

It used to have a div id which worked great but i need to use same id and multiple show/hides without changing the id and making ton of code, so i tried chan ging it to a class for this but i cant seem to get it to work. It hides the content but wont bring it up when clicked, any suggestions guys?

you must make your divs with class showorhide unique, otherwise, click on one, will show or hide all of them — Manish Mishra
– Manish Mishra, Commented Mar 3, 2013 at 8:02

Brandon · Accepted Answer · 2013-03-03 08:39:21Z

1

Edit now that I better understand the problem. Please take note of the markup changes as well. You'll notice that you need to throw away possible junk text nodes created by spaces in your markup, but this should work. In this particular case a library would greatly reduce the code you need to write. jQuery is a pretty common one. http://jsfiddle.net/Hx5uD/2/

  function showOrHide(clickedAnchorElement) {
      var i, toggleableElements, firstNonTextSibling = clickedAnchorElement;
      do {
          firstNonTextSibling = firstNonTextSibling.nextSibling;
      } while (firstNonTextSibling && firstNonTextSibling.nodeType == 3);

      toggleableElements = firstNonTextSibling.getElementsByClassName('showorhide');

      if (!toggleableElements) {
          return;
      }
      for (i = toggleableElements.length - 1; i >= 0; i--) {
          if (toggleableElements[i].style.display == "block") {
              toggleableElements[i].style.display = "none";
          } else {
              toggleableElements[i].style.display = "block";
          }
      }
  }

edited Mar 3, 2013 at 8:39

answered Mar 3, 2013 at 8:10

Brandon

3,5541 gold badge18 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brandon Over a year ago

The new javascript should do what you want. As a side note you could clean up your markup by removing the .showorhide divs and attaching the class directly to the UL. This would make the markup more semantically correct. The javascript could then be quite a bit less complicated. Additionally I would suggest adding a div (or possibly an LI) around the question and answer pair. This would create a nice logical separation between question/answer pairs and allow you to write much more precise javascript.

Lucas M. Oliveira · Accepted Answer · 2013-03-03 08:03:28Z

0

You should use onclick as you want to go with pure javascript, however jquery is(":visible") , will work much better in this place:

<a onclick="javascript:showOrHide();"><font size="3">Can i advertise in your chatroom? </font></a>

answered Mar 3, 2013 at 8:03

Lucas M. Oliveira

691 gold badge2 silver badges8 bronze badges

Comments

Manish Mishra · Accepted Answer · 2013-03-03 08:12:30Z

0

You must make your divs unique. otherwise your current javascript code will show and hide all the divs. besides, your current javascript code won't even work, because, .getElementByClassName("showorhide") is getting you multiple elements, and you are using it as as single element

modify your html to this:

<div align="left" style="padding-bottom:3px;">
      <font size="5">Chat Issues:</font>
 </div>
 <a href='javascript:showOrHide("div1");'>
      <font size="3">Are there any age requirements?</font>
 </a> 
 <ul style="margin:0px 0px 0px 0px;">
      <div id="div1">
          <li>Yes. You must be 13 years of age or older to use our chatrooms. Anyone under  
              the age of 13 will be directed to a chatroom more suitable for their age.
          </li>
      </div>  
 </ul>
 <a href='javascript:showOrHide("div2");'>
      <font size="3">Can i advertise in your chatroom? </font>
 </a> 
 <ul style="margin:0px 0px 0px 0px;">
    <div id="div2">
         <li>Absolutely not! Advertising is strictly prohibited and anyone caught 
             advertising will be banned without warning.
        </li>
    </div>
 </ul>

and modify your javascript code to this:

function showOrHide(id)  
    { 
        var div = document.getElementById(id); 
        if (div.myDivClass.display == "block")  
        { 
            div.myDivClass.display = "none"; 
        } 
        else  
        { 
            div.myDivClass.display = "block"; 
        } 
    }

edited Mar 3, 2013 at 8:12

answered Mar 3, 2013 at 8:06

Manish Mishra

12.4k5 gold badges40 silver badges65 bronze badges

2 Comments

user1305810 Over a year ago

this just keeps them unhiiden and does not allow them to hide

Manish Mishra Over a year ago

what you meand by that?? if your showhide class is supposed to hide them for the initial render, then place it also on all the divs next to id attribute

asifrc · Accepted Answer · 2013-03-03 08:12:31Z

0

Couple things:

document.getElementByClass should be document.getElementsByClassName (note that Elements is plural)
document.getElementsByClassName returns an array, so you need to use an index to access its items. There are a number of ways to do this; here's one way you could do it:

var divs = document.getElementsByClassName('showorhide');
for (i = 0; i < divs.length; i++)
{
    //Do your hide/show logic here using divs[i] instead of div
}

`div.myDivClass.display` should be `div[i].style.display` when you get/set the display property

Let me know if it all works/makes sense :)

answered Mar 3, 2013 at 8:12

asifrc

5,8412 gold badges20 silver badges22 bronze badges

Comments

Bozidar Sikanjic · Accepted Answer · 2013-03-03 08:14:00Z

0

Try this:

function showOrHide()  
{ 
    var div = document.getElementByClassName("showorhide"); 
    if (div.style.visibility == "visible")  
    { 
        div.style.visibility = "hidden"; 
    } 
    else  
    { 
        div.style.visibility = "visible"; 
    } 
}

answered Mar 3, 2013 at 8:14

Bozidar Sikanjic

151 silver badge5 bronze badges

Collectives™ on Stack Overflow

using javascript to do a class show/hide text

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related