Toggle div - show only 1 div at a time

Dev Shed Forums Sponsor:

May 13th, 2010, 07:30 AM

terra-dea

Contributing User

Join Date: Nov 2007

Posts: 247

Time spent in forums: 3 Days 9 h 8 m 22 sec
Reputation Power: 80

Toggle div - show only 1 div at a time

Hi folks,

I have this toggle script which works perfectly, however what I would like to incorporate into my original toggle code is for it to only allow one div to be shown at a time. So when one div is open and another link is clicked to open another div, the first div should then close and the second div should then appear in its place...

Code:

<!-- Begin
  function toggle(itemID){ 
      // Toggle visibility between none and inline 
      if ((document.getElementById(itemID).style.display == 'none')) 
      { 
        document.getElementById(itemID).style.display = 'inline'; 
      } else { 
        document.getElementById(itemID).style.display = 'none'; 
      } 
  }
// End -->

Can anyone please help to incorporate this??

Many thanks in advance for any help you are able to provide!

TD

May 13th, 2010, 09:23 AM

KorRedDevil

Contributing User

Join Date: Aug 2005

Location: Bucharest ROMANIA

Posts: 2,557

Time spent in forums: 4 Weeks 5 h 34 m 26 sec
Reputation Power: 614

You need to organize a collection of all the divs you need to toggle on /off and circle trough them. But the reference is quite a custom job, thus we need to see your HTML code syntax of those divs in order to have a clear picture of your DOM structure.

__________________
HELP SAVE ANA

May 13th, 2010, 10:17 AM

jhfry

Contributing User

Join Date: Nov 2009

Posts: 111

Time spent in forums: 1 Day 2 h 33 m 50 sec
Reputation Power: 24

You could do it by using classes and id's.

So each of the possible Divs are of class "toggle" and then each has it's own ID. Then just update your code as follows:

javascript Code:

Original - javascript Code

<!-- Begin
  function toggle(itemID){ 
        var allPageTags = new Array(); 
        var allPageTags=document.getElementsByTagName("div");  //Populate the array with all the page div's  
        for (i=0; i<allPageTags.length; i++) {  //Cycle through the tags using a for loop   
            if (allPageTags[i].className=="toggle") {  //Pick out the tags with our class name 
                allPageTags[i].style.display='none';  //set div visibility to none 
            }  
        } 
    
        // set visibility inline on selected id
        document.getElementById(itemID).style.display = 'inline'; 
    }
// End -->

Now it will set all divs of class "toggle" to none, then set the desired div to inline.

Comments on this post

terra-dea agrees: Excellent, quick response and brilliant solution, many thanks!

May 13th, 2010, 10:30 AM

terra-dea

Contributing User

Join Date: Nov 2007

Posts: 247

Time spent in forums: 3 Days 9 h 8 m 22 sec
Reputation Power: 80

Quote:

Originally Posted by KorRedDevil

Hi, my HTML structure is as follows:

Code:

<div id="home" style="display: none;">
	<div class="indent">
		<form id="edit_home" name="edit_home" method="post" action="pages_index.php">
			<label for="edit"><strong>Home Page</strong></label>
			<br>
			<textarea id="homepage" name="homepage" rows="10" cols="90"><?php print "$homepagecontent"; ?></textarea>
			<br>
			<input type="submit" id="updatehomepage" name="updatehomepage" value="amend home page" class="action" onClick="return confirm('Home Page content will be updated. Click OK to continue.');" />
			<input type="reset" id="reset" name="reset" value="undo changes" class="action" />
		</form>
	</div>
<br><br>
</div>
<div id="privacy" style="display: none;">
	<div class="indent">
		<form id="edit_privacy" name="edit_privacy" method="post" action="pages_index.php">
			<label for="edit"><strong>Privacy</strong></label>
			<br>
			<textarea id="privacy" name="privacy" rows="10" cols="90"><?php print "$privacycontent"; ?></textarea>
			<br>
			<input type="submit" id="updateprivacy" name="updateprivacy" value="amend privacy statement" class="action" onClick="return confirm('Privacy Statement page content will be updated. Click OK to continue.');" />
			<input type="reset" id="reset" name="reset" value="undo changes" class="action" />
		</form>
	</div>
<br><br>
</div>
<div id="disclaimer" style="display: none;">
	<div class="indent">
		<form id="edit_disclaimer" name="edit_disclaimer" method="post" action="pages_index.php">
			<label for="edit"><strong>Disclaimer</strong></label>
			<br>
			<textarea id="disclaimer" name="disclaimer" rows="10" cols="90"><?php print "$disclaimercontent"; ?></textarea>
			<br>
			<input type="submit" id="updatedisclaimer" name="updatedisclaimer" value="amend disclaimer" class="action" onClick="return confirm('Disclaimer page content will be updated. Click OK to continue.');" />
			<input type="reset" id="reset" name="reset" value="undo changes" class="action" />
		</form>
	</div>
<br><br>
</div>
<div id="terms" style="display: none;">
	<div class="indent">
		<form id="edit_terms" name="edit_terms" method="post" action="pages_index.php">
			<label for="edit"><strong>Terms & Cond.</strong></label>
			<br>
			<textarea id="termsconditions" name="termsconditions" rows="10" cols="90"><?php print "$termsconditionscontent"; ?></textarea>
			<br>
			<input type="submit" id="updateterms" name="updateterms" value="amend terms & conditions" class="action" onClick="return confirm('Terms & Conditions page content will be updated. Click OK to continue.');" />
			<input type="reset" id="reset" name="reset" value="undo changes" class="action" />
		</form>
	</div>
<br><br>
</div>
<div id="ordering" style="display: none;">
	<div class="indent">
		<form id="edit_orderinfo" name="edit_orderinfo" method="post" action="pages_index.php">
			<label for="edit"><strong>Ordering Info</strong></label>
			<br>
			<textarea id="orderinformation" name="orderinformation" rows="10" cols="90"><?php print "$orderinfocontent"; ?></textarea>
			<br>
			<input type="submit" id="updateorderinfo" name="updateorderinfo" value="amend order info page" class="action" onClick="return confirm('Ordering Information page content will be updated. Click OK to continue.');" />
			<input type="reset" id="reset" name="reset" value="undo changes" class="action" />
		</form>
	</div>
<br><br>
</div>
<div id="news" style="display: none;">
	<div class="indent">
		<form id="edit_news" name="edit_news" method="post" action="pages_index.php">
			<label for="edit"><strong>News/Updates</strong></label>
			<br>
			<textarea id="news" name="news" rows="10" cols="90"><?php print "$newscontent"; ?></textarea>
			<br>
			<input type="submit" id="updatenews" name="updatenews" value="amend news page" class="action" onClick="return confirm('News page content will be updated. Click OK to continue.');" />
			<input type="reset" id="reset" name="reset" value="undo changes" class="action" />
		</form>
	</div>
<br><br>
</div>

which are presently toggled using the code in my first post within these links:

Code:

<a href="javascript: toggle('home');" class="button"><span class="edit">Home Page</span></a>

<a href="javascript: toggle('privacy');" class="button"><span class="edit">Privacy Statement</span></a>

<a href="javascript: toggle('disclaimer');" class="button"><span class="edit">Disclaimer</span></a>

<a href="javascript: toggle('terms');" class="button"><span class="edit">Terms & Conditions</span></a>

<a href="javascript: toggle('ordering');" class="button"><span class="edit">Ordering Information</span></a>

<a href="javascript: toggle('news');" class="button"><span class="edit">News/Updates</span></a>

May 13th, 2010, 10:33 AM

terra-dea

Contributing User

Join Date: Nov 2007

Posts: 247

Time spent in forums: 3 Days 9 h 8 m 22 sec
Reputation Power: 80

Quote:

Originally Posted by jhfry

You could do it by using classes and id's.

So each of the possible Divs are of class "toggle" and then each has it's own ID. Then just update your code as follows:

javascript Code:

Original - javascript Code

<!-- Begin
  function toggle(itemID){ 
        var allPageTags = new Array(); 
        var allPageTags=document.getElementsByTagName("div");  //Populate the array with all the page div's  
        for (i=0; i<allPageTags.length; i++) {  //Cycle through the tags using a for loop   
            if (allPageTags[i].className=="toggle") {  //Pick out the tags with our class name 
                allPageTags[i].style.display='none';  //set div visibility to none 
            }  
        } 
    
        // set visibility inline on selected id
        document.getElementById(itemID).style.display = 'inline'; 
    }
// End -->

Now it will set all divs of class "toggle" to none, then set the desired div to inline.

Hey, yeah thanks for that! Works a charm! Although I can't seem to close any of the divs that are opened. Example - the "privacy" div is opened, but I dont want any opened at present, so when I click on the link to show "privacy" it doesn't "hide" the div...

Do you know how to work around this?

Many thanks for your help

EDIT: Never mind, I created a new function to close the opened div. Many many thanks for your help jhfry!! +rep

Last edited by terra-dea : May 13th, 2010 at 10:37 AM.

May 13th, 2010, 10:39 AM

jhfry

Contributing User

Join Date: Nov 2009

Posts: 111

Time spent in forums: 1 Day 2 h 33 m 50 sec
Reputation Power: 24

just add class="toggle" to each of the divs you want to toggle then use the modified code I sent you.

Should work like a charm if you only ever want to see one div at a time.

Toggle div - show only 1 div at a time

Developer Shed Advertisers and Affiliates