www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript Toggle

  1. #1
    Join Date
    Feb 2012
    Posts
    8

    Javascript Toggle

    Hi all,

    Really new to javascript and was hoping y'all could help me with a bit of trouble I'm having.

    I'm using the script below to toggle 5 DIV tags independently on click:

    Code:
    // JavaScript Document
    
    function toggleSpecific(elementid) {
            var node = document.getElementById(elementid);
            if(node.style.display == '') {
              node.style.display='none';
            }
            else {
              node.style.display = '';
            }
          }
    Code:
    <div id="hide1" style="display:none; width:275px; position:relative; top:30px; left:30px;">
        <img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
        <div class="info_box_left">
      <img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
      Sample body copy goes here
      </div>
    	</div>
    The issue I'm trying to solve is how do I get only a single DIV to show at any time. So, if you open hidden info(1) and then click the button for hidden info(2), hidden info(1) disappears and hidden info(2) displays.

    All your feedback is appreciated.

    Thanks!

  2. #2
    Join Date
    Feb 2012
    Posts
    218
    HTML Code:
    <style>
    	.divs{
    		display:none; width:275px; position:relative; top:30px; left:30px;
    	}
    	#hide1{
    		display:block;
    	}
    </style>
    <div id="hide1" class="divs">
      <img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
      <div class="info_box_left">
    	<img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
    	Sample body copy goes here hide 1
      </div>
    </div>
    <div id="hide2" class="divs">
      <img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
      <div class="info_box_left">
    	<img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
    	Sample body copy goes here hide 2
      </div>
    </div>
    <div id="hide3" class="divs">
      <img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
      <div class="info_box_left">
    	<img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
    	Sample body copy goes here hide 3
      </div>
    </div>
    <div id="hide4" class="divs">
      <img style="float:left; position:relative; top:37px;" src="images/arrow_left.png" width="11" height="20" alt="Arrow" />
      <div class="info_box_left">
    	<img style="float:left; margin:0px 10px 0px 0px" src="images/thumb_sample.jpg" width="64" height="76" alt="Sample Image" /><strong>Headline Goes Here</strong><br />
    	Sample body copy goes here hide 4
      </div>
    </div>
    <script type="text/javascript">
    function toggleSpecific(elementid) {
    	var elms = document.getElementsByClassName('divs');
    	var node = document.getElementById(elementid);
    	for(i in elms){
    		if(elms[i]==node)
    			elms[i].style.display = 'block';
    		else
    			elms[i].style.display = 'none';
    	}
    }
    toggleSpecific('hide1');
    /*
    toggleSpecific('hide2');
    toggleSpecific('hide3');
    toggleSpecific('hide4');
    */
    </script>
    Put a class to all the divs you want to hide. We will keep these divs in elms variable.
    On function call, we compare each div with the current one and if is the current one, we show it, otherwise we hide it.

  3. #3
    Join Date
    Feb 2012
    Posts
    8
    All the DIV elements aren't the same width and don't have the same positioning so I'm assuming I can position with a DIV wrapper and use the DIVS class inside for the toggle?

    Thank you very much for your response!

  4. #4
    Join Date
    Feb 2012
    Posts
    218
    Don't matter the properties of the divs, as long as they all have class="divs".

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles