CODEWITHSUNDEEP
javascriptjqueryhtml
epg388
epg388

Reputation: 137

jQuery show an li when a different li is clicked

I have two lists - the first one has a name, larger image and description and the second one is a list of small thumbnails. When a thumbnail is clicked I need the corresponding li with the larger image and text to appear only. So if the thumbnail for John Doe is clicked, I need the larger John Doe image and text to appear and make sure that the larger Bob Doe and Tom Doe pictures and text are hidden. I also want to show the first larger image and description when the page is loaded. Here is my HTML and jQuery so far - thank you!

  <div id="bios">
      <ul>
        <li>
            <img src="../img/jd.jpg" alt="John Doe">
            <br>
            <span class = "name">John Doe</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
        </li>

        <li>
            <img src="../img/bd.png" alt="Bob Doe">
            <br>
            <span class = "name">Bob Doe</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
        </li>

        <li>
            <img src= "../img/td.png" alt="Tom Doe">
            <br>    
            <span class = "name">Tom Doe</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate diam ut porta pharetra. Nunc egestas ac turpis nec tempor.</p>
        </li>

       </ul>    
</div>
    <div id = "thumb">
      <ul>  
        <li>

            <img src="../img/jdthumb.png" alt="John Doe">
            <br>
            John Doe        
        </li>


        <li>

            <img src="../img/bdthumb.png" alt="Bob Doe">
            <br>
            Bob Doe

        </li>

        <li>    

            <img src= "../img/tdthumb.png" alt="Tom Doe">
            <br>
            Tom Doe

        </li>   

    </ul>
</div>

jQuery:

  $("#bios li").first().css( "display", "block" );

  $("#thumb li").on('click', function() {
      $( "#bios li" ).css( "display", "block");
      $(this).siblings('li').slideToggle();

  });

Upvotes: 1

Views: 112

Answers (3)

Scott Sauyet
Scott Sauyet

Reputation: 50787

Barmar's answer is great, so long as you are willing to always keep a one-for-one correspondence between your thumbnails and your images, and to keep them in the same markup order. If not, I would suggest that you pair ids, for example,

<li id="img-john">  <!-- or use `img-1`, `img-2`, etc. -->
    <img src="../img/jd.jpg" alt="John Doe">
    <!-- ... -->
</li>
<li id="img-bob">
    <img src="../img/bd.jpg" alt="Bob Doe">
    <!-- ... -->
</li> <!- ... -->

<!-- ... -->

<li id="thumb-john">
    <img src="../img/jdthumb.jpg" alt="John Doe">
    <!-- ... -->
</li>
<li id="thumb-bob">
    <img src="../img/bdthumb.jpg" alt="Bob Doe">
    <!-- ... -->
</li> <!- ... -->

Then you can do something like this (untested):

$("#thumb li").click(function() {
    var id = this.id.replace("img", "thumb");
    $("#bios li").hide();
    $("#" + id).show();
    $(this).siblings("li").slideToggle();
});

Upvotes: 0

Ringo
Ringo

Reputation: 3965

Try this:

css 

#bios > ul > li{
    display: none;
}
#bios > ul > li:first-child{
    display: block;
}

javascript 

$(function(){
    $('#thumb ul li').click(function(){
        var index = $(this).index();
        $('#bios ul li').hide();
        $('#bios ul li').eq(index).show();
    });
});

And here is your jsfiddle

Upvotes: 0

Barmar
Barmar

Reputation: 780724

$("#thumb li").click(function() {
    var pos = $(this).index();
    $("#bios li").hide();
    $("#bios li").eq(pos).show();
    $(this).siblings("li").slideToggle();
});

Upvotes: 2

Related Questions