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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    77
    Thanks
    8
    Thanked 0 Times in 0 Posts

    show/hide divs clicking on links

    I want to show/hide divs on the click of links...how can i achieve this using jquery?

    When i click on first link it should show first div...
    if i click on 2nd link it shod open 2nd div and hide remaining divs and so on....

    Please see the below code


    Code:
     <div id="core">  
                <div class="page" id="page1">
                    <div class="textImage ">
                        <img src="images/img1.png" width="665" height="138">
                        
                    </div>
                    
                    <div class="textImage">
                        <div class="textImage floatLeft">
                            <img src="images/img2.png" width="448" height="177" class="floatLeft">
                            
                        </div>
                        <div class="textImage floatLeft">
                            <img src="images/img3.png" width="432" height="183" class="floatLeft">
                            
                        </div>
                    </div>
                </div>
                
                <div class="page"  id="page2" style="display:none">
                    <div class="textImage">
                        <div class="textImage floatLeft">
                            <img src="images/img2.png" width="448" height="177" class="floatLeft">
                            
                        </div>
                        <div class="textImage floatLeft">
                            <img src="images/img3.png" width="432" height="183" class="floatLeft">
                            
                        </div>
                    </div>
                     <div class="textImage ">
                        <img src="images/img1.png" width="665" height="138">
                        
                    </div>
                </div>
                
                <div class="page"  id="page3" style="display:none">
                    <div class="textImage">
                        <div class="textImage floatLeft">
                            <img src="images/img2.png" width="448" height="177" class="floatLeft">
                            
                        </div>
                        <div class="textImage floatLeft">
                            <img src="images/img3.png" width="432" height="183" class="floatLeft">
                            
                        </div>
                    </div>
                    
                    <div class="textImage">
                        <div class="textImage floatLeft">
                            <img src="images/img2.png" width="448" height="177" class="floatLeft">
                            
                        </div>
                        <div class="textImage floatLeft">
                            <img src="images/img3.png" width="432" height="183" class="floatLeft">
                            
                        </div>
                    </div>
                </div>
               
               <div id="my-carousel-2" class="carousel module">
    	    <ul>
    		<li><a href='javascript:;' ><img src="images/1.png" width="79" height="79" /></a></li>
    		<li><a href='javascript:;' ><img src="images/2.png" width="80" height="80" /></a></li>
                    <li><a href='javascript:;'><img src="images/3.png" width="79" height="79" /></a></li>
                    <li><a href='javascript:;'><img src="images/4.png" width="80" height="79" /></a></li>
                    <li><a href='javascript:;' ><img src="images/5.png" width="79" height="83" /></a></li>
                    <li><a href='javascript:;'><img src="images/6.png" width="79" height="83" /></a></li>
                    <li><a href='javascript:;'><img src="images/7.png" width="80" height="83" /></a></li>
                    <li><a href='javascript:;'><img src="images/8.png" width="79" height="83" /></a></li>
    		    </ul>
    		</div>
            </div>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,395
    Thanks
    12
    Thanked 569 Times in 562 Posts
    All of your DIVs have the common class "page", which is a good thing. But I see 8 links and only 3 DIVs with class "page"? Is it only a partial extract?

    Nevertheless, try this
    Code:
    $('#my-carousel-2 > ul > li > a').click(function() {
       var whichLink = $(this).parent().index(); // 0 to 7
       // hide all pages first
       $('.page').hide();
       // then show only DIV with correct index
       $('.page').eq(whichLink).show();
    });

  • Users who have thanked devnull69 for this post:

    prajwala (12-11-2012)

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    77
    Thanks
    8
    Thanked 0 Times in 0 Posts
    It's working ...thanks a lot


  •  

    Posting Permissions

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