jQuery Element Swap

Question

I have 3 divs where only one is visible by default, they each contain information about a product. Below this divs is a list of 3 images which are images of the products. By default of course the 1st list item is selected and has class="selected". When a different product image is clicks then class="selected" moves to that list item and the div above it changes to hidden and the div containing the other product information needs to appear.

I have searched all over the place for a plugin which can do what I want, they are all limited in some way which stops me doing from doing it.

Answer 1

Consider the following code:

<img id="img1" src="1.jpg" desc="d1" class="selected prodImg" />
<img id="img2" src="2.jpg" desc="d2" class="prodImg" />
<img id="img3" src="3.jpg" desc="d3" class="prodImg"/>

<div id="d1">description 1</div>
<div id="d2" class="hidden">description 2</div>
<div id="d3" class="hidden">description 3</div>

<script>

    $(".prodImg").click(function() {

     if ($(this).hasClass("selected")) return;

     $("#" + $(".selected").attr("desc")).addClass("hidden");
     $(".selected").removeClass("selected");

     $("#" + $(this).attr("desc")).removeClass("hidden");
     $(this).addClass("selected");

    });

</script>

This should get you pretty close. You need to define the relationship between your images and divs... so I added a 'desc' attribute to the images. The extra 'prodImg' class on the images allows you to ensure that only those images are being wired up for this type of swap in and out behavior.

Answer 2

The Acordian widget has some similar functionality. If you place the images in the headers you would get the effect you want.

Look at http://docs.jquery.com/UI/Accordion for more information.

Answer 3

<script>

    $(".prodImg").click(function() {

        if ($(this).hasClass("selected")) return;


        $('.prodImg').removeClass('selected');

        $(this).addClass('selected');

        var name = $(this).attr('desc');

        $('.'+name).removeClass();
        $('.'+name).addClass('');       

    });

</script>

I hope this can help you!