Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Show Hide Div Help

    I have a javascript that shows and hides a div based on the click of an image. It works, but if you click the next image, the current div showing does not disappear. I want one div to disappear when the other image is clicked.

    Javascript
    Code:
            $(document).ready(function () {
    
                        $(".slidingDiv").hide();
                        $(".show_hide").show();
                        $('.show_hide').click(function () {
                            $(".slidingDiv").slideToggle();
                        });
    
                        $(".slidingDiv2").hide();
                        $(".show_hide2").show();
                        $('.show_hide2').click(function () {
                            $(".slidingDiv2").slideToggle();
                        });
    
                        $(".slidingDiv3").hide();
                        $(".show_hide3").show();
                        $('.show_hide3').click(function () {
                            $(".slidingDiv3").slideToggle();
                        });
    
                        $(".slidingDiv4").hide();
                        $(".show_hide4").show();
                        $('.show_hide4').click(function () {
                            $(".slidingDiv4").slideToggle();
                        });
    
                        $(".slidingDiv5").hide();
                        $(".show_hide5").show();
                        $('.show_hide5').click(function () {
                            $(".slidingDiv5").slideToggle();
                        });
    
                        $(".slidingDiv6").hide();
                        $(".show_hide6").show();
                        $('.show_hide6').click(function () {
                            $(".slidingDiv6").slideToggle();
                        });
            });
    HTML
    Code:
    <img src="images/image1.png" class="show_hide"/>
    <img src="images/image2.png" class="show_hide2"/>
    
    <div class="slidingDiv">div1 text here</div>
    <div class="slidingDiv2">div2 text here</div>
    Any ideas?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    
    <script type="text/javascript">
    $(document).ready(function () {
    	$(".slidingDiv").hide();
    
    	$('.show_hide1').click(function () {
    		$(".slidingDiv").hide();
    	   $("#slidingDiv1").slideToggle();
    	});
    
    	$('.show_hide2').click(function () {
    		$(".slidingDiv").hide();
    	   $("#slidingDiv2").slideToggle();
    	});
    });
    </script>
    </head>
    <body>
    <img src="images/image1.png" class="show_hide1"/>
    <img src="images/image2.png" class="show_hide2"/>
    
    <div id="slidingDiv1" class="slidingDiv">div1 text here</div>
    <div id="slidingDiv2" class="slidingDiv">div2 text here</div>
    </body>
    </html>
    Continue for all 100 images.

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Almost. I want the div to also disappear when the use re-clicks the image. So the div would appear and disappear when the user clicks the image, and also disappear when the user clicks another image. Can that be done??

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Quote Originally Posted by mikemcg36 View Post
    Almost. I want the div to also disappear when the use re-clicks the image. So the div would appear and disappear when the user clicks the image, and also disappear when the user clicks another image. Can that be done??
    I used three pictures for this to insure it worked.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    
    <script type="text/javascript">
    $(document).ready(function () {
    	$(".slidingDiv").slideUp();
    
    	$('.show_hide1').click(function () {
    		$(".slidingDiv").slideUp();
    			if ($("#slidingDiv1").is(":hidden")) {
    				 $("#slidingDiv1").show("slow");
    			} else {
    			$(".slidingDiv").slideUp();
    			}
    	});
    
    	$('.show_hide2').click(function () {
    		$(".slidingDiv").slideUp();
    			if ($("#slidingDiv2").is(":hidden")) {
    				 $("#slidingDiv2").show("slow");
    			} else {
    			$(".slidingDiv").slideUp();
    			}
    	});
    
    	$('.show_hide3').click(function () {
    		$(".slidingDiv").slideUp();
    			if ($("#slidingDiv3").is(":hidden")) {
    				 $("#slidingDiv3").show("slow");
    			} else {
    			$(".slidingDiv").slideUp();
    			}
    	});
    });
    </script>
    </head>
    <body>
    <img src="images/image1.png" class="show_hide1"/>
    <img src="images/image2.png" class="show_hide2"/>
    <img src="images/image3.png" class="show_hide3"/>
    
    <div id="slidingDiv1" class="slidingDiv" style="max-width:300px;">
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    div1 text here
    </div>
    <div id="slidingDiv2" class="slidingDiv" style="max-width:300px;">
    div2 text here
    div2 text here
    div2 text here
    div2 text here
    div2 text here
    div2 text here
    </div>
    <div id="slidingDiv3" class="slidingDiv" style="max-width:300px;">
    div3 text here
    div3 text here
    div3 text here
    div3 text here
    div3 text here
    div3 text here
    div3 text here
    div3 text here
    div3 text here
    div3 text here
    div3 text here
    </div>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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