Question

I am trying to display multiple images. On click, a different text should be displayed.

I tried doing this by showing the text associated with image 1 as default, give the other images/text a display: none; and change that when the user clicks on the image by using the switch statement. However, I seem to be missing something. What am I missing?

Relevant JavaScript:

    $(document).ready(function(){  
$("#list1 > li").click(function(e){  
    switch(e.target.id){  
        case "case1":  
            //change status & style menu  
            $("#nav1").addClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav3").removeClass("active");  
            $("#nav4").removeClass("active");  
            //display selected division, hide others  
            $("div.test1").fadeIn();  
            $("div.test2").css("display", "none");  
            $("div.test3").css("display", "none");  
            $("div.test4").css("display", "none"); 
        break;  
        case "case2":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").addClass("active");  
            $("#nav3").removeClass("active"); 
            $("#nav4").removeClass("active");   
            //display selected division, hide others  
            $("div.test2").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test3").css("display", "none"); 
            $("div.test4").css("display", "none"); 
        break;  
        case "case3":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav3").addClass("active");  
            $("#nav4").removeClass("active");
            //display selected division, hide others  
            $("div.test3").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test2").css("display", "none"); 
            $("div.test4").css("display", "none"); 
        break;  
        case "case4":  
            //change status & style menu  
            $("#nav1").removeClass("active");  
            $("#nav2").removeClass("active");  
            $("#nav4").addClass("active");  
            $("#nav3").removeClass("active");
            //display selected division, hide others  
            $("div.test3").fadeIn();  
            $("div.test1").css("display", "none");  
            $("div.test2").css("display", "none");  
            $("div.test4").css("display", "none");
        break;  
    }  
    //alert(e.target.id);  
    return false;  
});  
    }); 

Relevant HTML:

        <div id="slider">
<ul id="list1">
    <li id="nav1" class="active"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav2"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav3"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
    <li id="nav4"><a href="#"><img src="test-img.jpg" style="width:156px;height:156px;"></a></li>
</ul>

    <div class="test1">
    <h2>Test tab</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="test2">
    <h2>Test tab2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="test3">
    <h2>Test tab3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
        <p>labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
        <p>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse </p>
        <p>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in </p>
        <p>culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>

Answer 1

You have the ids of lis as nav1, nav2, etc. In the switch case, you are using case1, case2, etc.

Change that and things should start working.

Having said that, your jQuery is horribly bloated. It’s called the write less, do more JS library for a reason, you know. 🙂

Update: (Been doing this since a while on this jsBin. I know @roxon has got the exact same answer a minute back, but I’ll post it here to make sure the time spent isn’t useless )

$("#list1 > li").click(function(){  
  var index = $(this).index();
  $('.active').removeClass('active');
  $(this).addClass('active');

  $('.test').hide().eq(index).fadeIn();
  return false;
});

This will work, with a small change to the html structure. Instead of having div classes as test1, test2, etc just have all the divs with a common class test