www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: JQuery : Show/Hide only one div at a time

  1. #1
    Join Date
    Sep 2008
    Posts
    53

    JQuery : Show/Hide only one div at a time

    I have a page with 10 buttons, when the user presses a button it shows/hides the respective <div> containing the information. However if they show a div and try to show another before hiding the last one both of them are visible.

    Is there a way to iterate through all the div names and hide all off them and then show only the one that was selected?


    Something along the lines of this:

    Code:
    var divNames = new Array();
    divNames = "div1","div2","div3","div4","div5";
    	
    
    	$("button").click(function () {
        
    	    for(var i=0; i<array.length; i++) {
    			 $(divNames[i]).hide("slow");
    		}
         
        // Then show div which was selected
        
        
        
        });
    Thanks

  2. #2
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    You haven't shown us your markup, so this is a total shot in the dark, but with jQuery, people typically do this:

    $("#the-div-to-show").show().siblings().hide()
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  3. #3
    Join Date
    Sep 2008
    Posts
    53
    Here is some example mark up, would it be possible to make it dynamic so that if another button and div was added the jquery wouldnt have to be changed. Maybe by passing the value of the button as the value to determine which div to show/??

    Code:
    <html>
    <head>
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    
    	<script type="text/javascript" src="scripts.js"></script> 
    </head>
    <body>
    
    
    <div id="buttonsDiv"> 
    
    <input type="button" id="button1" class="buttons" value="div1"></input>
    <input type="button" id="button2" class="buttons" value="div2"></input>
    <input type="button" id="button3" class="buttons" value="div3"></input>
    <input type="button" id="button4" class="buttons" value="div4"></input>
    
    </div>
    	
    
    
    <div id="div1" style="display:none"
    Hello World
    </div>
    
    <div id="div2" style="display:none"
    Test
    </div>
    
    <div id="div3" style="display:none"
    Another Test
    </div>
    
    <div id="div4" style="display:none"
    Final Test
    </div>
    
    
    
    </body>
    </html>
    Last edited by Palli; 01-16-2009 at 12:39 PM.

  4. #4
    Join Date
    Sep 2008
    Posts
    53
    bump!

    Any ideas, im not the best at jquery and can't seem to work this out...

    Cheers

  5. #5
    Join Date
    Sep 2008
    Posts
    53
    Got it to work now. see the code below now if anyone is interested.

    Thanks for the help Jeff


    Code:
    <html>
    <head>
    	<script src="http://code.jquery.com/jquery-latest.js"></script>
    	<script>
    		$(document).ready(function(){
    		    
    		    $(".buttons").click(function () {
    		    var divname= this.value;
    		      $("#"+divname).show("slow").siblings().hide("slow");
    		    });
    		
    		  });
    	</script> 
    </head>
    <body>
    
    
    <div id="buttonsDiv"> 
    
    <input type="button" id="button1" class="buttons" value="div1"></input>
    <input type="button" id="button2" class="buttons" value="div2"></input>
    <input type="button" id="button3" class="buttons" value="div3"></input>
    <input type="button" id="button4" class="buttons" value="div4"></input>
    
    </div>
    	
    <div>
    
    <div id="div1" style="display:none">
    Hello World
    </div>
    
    <div id="div2" style="display:none">
    Test
    </div>
    
    <div id="div3" style="display:none">
    Another Test
    </div>
    
    <div id="div4" style="display:none">
    Final Test
    </div>
    
    
    </div>
    
    
    </body>
    </html>

  6. #6
    Join Date
    Nov 2010
    Posts
    1

    help!

    Palli, i just find your solution, and im searching for that but instead of buttons with links, itīs that posible?

    thanks in advance!

  7. #7
    Join Date
    Nov 2010
    Location
    California, USA
    Posts
    1

    JQuery : Show/Hide only one div at a time with Anchors

    You can use the property name instead of buttons value
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function(){

    $('a').click(function () {
    var divname= this.name;
    $("#"+divname).show("slow").siblings().hide("slow");
    });

    });
    </script>
    </head>
    <body>


    <div class="menu">
    <ul>
    <li><a href="#" name="div1" >Home</a></li>
    <li><a href="#" name="div2" >Page1</a></li>
    <li><a href="#" name="div3" >page2</a></li>
    <li><a href="#" name="div4" >page3</a></li>
    </ul>
    </div>

    <div>

    <div id="div1" style="display:none">
    Hello World
    </div>

    <div id="div2" style="display:none">
    Test
    </div>

    <div id="div3" style="display:none">
    Another Test
    </div>

    <div id="div4" style="display:none">
    Final Test
    </div>


    </div>


    </body>
    </html>

  8. #8
    Join Date
    Apr 2011
    Posts
    2

    Double Click Issue?

    rockdriven, your suggestion was exactly what I was looking and works great.

    I have one issue though, once I get through all the divs and try to go back to one I had previously clicked on, the first click puts out "Uncaught ReferenceError: newContent is not defined".

    I tried a few different ways to clear it but have been unsuccessful. Any idea why?

    Thanks for the previous post, helped greatly.

  9. #9
    Join Date
    Apr 2011
    Posts
    2
    Just figured it out - simplest things first.

    I've been testing different ways of loading in new content and had another .js script messing with the div id so once the show/hide/show was triggered it was over riding the other.

    Something sparked me to look at my initial code after reading this:

    "One final thing to check is to make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described."

    http://stackoverflow.com/questions/2...is-not-defined

  10. #10
    Join Date
    Dec 2011
    Posts
    2

    Here is a nifty solution I found to your query

    Here are three paragraphs, initially all hidden, and when a user clicks on a header, the associated paragraph will show if hidden, or hide if shown. However, if paragraph "a" is shown, and the user clicks on paragraph "b", paragraph a will first disappear and then "b" will be shown. Okay enough of the talking, here's the basic html:

    HTML Code:
    <h2 id="title_para1">First header</h2>
    <p>First paragraph content</p>
    
    <h2 id="title_para2">Second header</h2>
    <p>Second paragraph content</p>
    
    <h2 id="title_para3">Third header</h2>
    <p>Third paragraph content</p>
    and the jquery:

    Code:
    <script type="text/javascript">
        //create an array to store the header id's
        tableTitle = new Array();
        //iterate through each h2 header element
        $('h2').each( function(index) {
            //store each h2 id in the array
            tableTitle[index] = $(this).attr('id');
        });
    $(document).ready(function(){
        //when user clicks on a header
        $("h2").click(
            function(){
                    //create a loop to close all of the paragraphs after user click
                    for (var i=0; i<3; i++) {
                        $('#'+tableTitle[i]).next().hide("2000");
                    }
                //check the css of the paragraph associated with the clicked header
                if($(this).next().css('display') == 'none'){
                    //if display is set to none in css, show the paragraph
                    $(this).next().show('2000');
                }else{
                    //if the display is not set to none, hide the paragraph
                    $(this).next().hide('2000');
                }
            }
        );
    });
    
    
    </script>

    The good thing about this, is that thanks to the each(function(index)) function, you can add as many paragraphs (or whatever kind of div for that matter) and you won't even have to change one line of code. Niiiiice

  11. #11
    Join Date
    Dec 2011
    Posts
    2

    Actually

    My above response was for those who want to use the show and hide functions on elements that are not siblings, and only have one element showing at any one time. Therefore, I thought it'd be useful and is not covered in this thread.

  12. #12
    Join Date
    Feb 2012
    Posts
    1

    Getting close

    Hello,
    I'm very new to this and am building a website for my music duo. I have a page for gig listings on which I would like to show just the basic details of each gig (date and place) and then a link after each title which, upon being clicked, will show more details below. I only want one 'more details' section to show at a time. This code almost works but the details come up in the same place rather than below each individual listing. Is there a way to change that reasonably simply?
    Thanks in advance,
    Charlotte

  13. #13
    Join Date
    Nov 2007
    Posts
    409
    @mandogirl
    You should start a new thread and post a sample of the HTML and script you already have. Since it's not doing what you want... a screen shot with some text added to it so we know what you are looking for may be helpful too (upload to flickr, etc.)

  14. #14
    Join Date
    Apr 2012
    Posts
    1

    Help!

    Hello,

    I am having the same problem on my page, but my "buttons" are links, can anyone help me out??

    here is my java script:

    <script language="JavaScript">
    function toggle(id) {
    var state = document.getElementById(id).style.display;
    if (state == 'block') {
    document.getElementById(id).style.display = 'none';
    } else {
    document.getElementById(id).style.display = 'block';
    }
    }
    </script>

  15. #15
    Join Date
    Apr 2012
    Posts
    1
    Hi

    I am working on creating a menu for a portfolio
    It is basically three columns dividing categories from broad to specific
    Medium | Subject | Project

    Thanks to the extremely helpful advice on this forum I got everything to work except for one slight problem.

    How can the script be altered to hide the items in the Project div when a new item in the Medium div is selected?

    I think you'll understand what I mean better with the code

    http://jsfiddle.net/crWTy/

    Any help will be greatly appreciated!

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