CODEWITHSUNDEEP
jquery
zuk1
zuk1

Reputation: 18369

jQuery Element Swap

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.

Upvotes: 0

Views: 2212

Answers (3)

gacon
gacon

Reputation: 2135

<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!

Upvotes: 0

Markus Jarderot
Markus Jarderot

Reputation: 89171

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.

Upvotes: 1

Jeff Fritz
Jeff Fritz

Reputation: 9861

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.

Upvotes: 2

Related Questions