CODEWITHSUNDEEP
jquery
Dean Elliott
Dean Elliott

Reputation: 729

Show one div, hide all others on click

I have a simple image/video gallery that I want to animate with jQuery. All I want to be able to do is, when someone clicks a link the .big div with the same ID is set to display:block; opacity:1 and all the other divs are set to display:none; opacity:0

This is the markup for my gallery;

<div id="gallery">

    <div class="main">

        <div id="big-1" class="big"><!-- image / video here --></div>
        <div id="big-2" class="big"><!-- image / video here --></div>
        <div id="big-3" class="big"><!-- image / video here --></div>

    </div>

    <div class="thumbnails">

        <a id="1" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

    </div>

</div>

By default all the .big divs are set to display:none; opacity:0 except the first one.

Upvotes: 3

Views: 7910

Answers (7)

Claudio Holanda
Claudio Holanda

Reputation: 2566

Here is a simpler solution whithout the need of ids or random attributes:

The HTML:

<div id="gallery">
<div class="main">
    <div class="big show"><!-- image / video here --></div>
    <div class="big"><!-- image / video here --></div>
    <div class="big"><!-- image / video here --></div>
</div>

<div class="thumbnails">
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a href="#"><img src="images/thumb1.jpg" alt="#"/></a>
</div>

jQuery:

$('.thumbnails a').on('click',function(){
   var eq = $(this).index();

   $('.main .big').removeClass('show');
   $('.main .big').eq(eq).addClass('show');
});

Basically what it does it get the position of the thumbnail clicked and then show the gallery element in the same position (adding a class .show which have display:block for example).

Here is a flavored FIDDLE ilustrating the approach.

Upvotes: 2

jagruti
jagruti

Reputation: 390

Please try this:

<div id="gallery">

<div class="main">

    <div rel="1" class="big"><!-- image / video here -->1 d</div>
    <div rel="2" class="big"><!-- image / video here -->2f</div>
    <div rel="3" class="big"><!-- image / video here -->3d</div>

</div>

<div class="thumbnails">
    <a id="1" href="#"><img src="images/thumb1.jpg" alt="#"/>1</a>
    <a id="2" href="#"><img src="images/thumb1.jpg" alt="#"/>2</a>
    <a id="3" href="#"><img src="images/thumb1.jpg" alt="#"/>3</a>

</div>


$('.big').click(function(){
   var cuu_id= $(this).attr('rel');
    $('a').hide();
    $("#"+cuu_id).show();
 });

.thumbnails a {display:none;}

Upvotes: 0

codingrose
codingrose

Reputation: 15699

ID cannot be alone numeric.

Conventions for ID:

Must contain at least one character

Must not contain any space characters

Do NOT start an ID name with a number

ID must be unique.

Try:

HTML:

<div id="gallery">

    <div class="main">

        <div id="b1" class="big active"><!-- image / video here --></div>
        <div id="b2" class="big"><!-- image / video here --></div>
        <div id="b3" class="big"><!-- image / video here --></div>

    </div>

    <div class="thumbnails">

        <a id="t1" class="active" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="t2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
        <a id="t3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

    </div>

</div>

jQuery:

$(".big").click(function () {
        var th = $(this);
        var id = this.id;
        id = id.substr(1);
        if (!($(th).hasClass("active"))){
            $(".active ").removeClass("active");
            $(th).addClass("active");
            $(".thumbnails ").find("#t"+id).addClass("active");
        }
    });

CSS:

.main div,.thumbnails div{display:none; opacity:0}
.active{display:block;opacity:1}

Upvotes: 1

amosmos
amosmos

Reputation: 1049

First of all you have several elements with the same ID, which is wrong. Each ID on the page should be unique.

Then you could do something like this:

<div class="main">

    <div id="vid1" class="big"><!-- image / video here --></div>
    <div id="vid2" class="big"><!-- image / video here --></div>
    <div id="vid3" class="big"><!-- image / video here --></div>

</div>

<div class="thumbnails">

    <a id="1" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a id="2" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a id="3" class="vidlink" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

</div>
<script>
    $('a.vidlink').click(function(){
        $('div.main div').css('opacity',0).css('display','none');
        $('div.main div#vid'+this.attr('id')).css('opacity',1).css('display','block');
    });
</script>

But I higly recommend just using jquery's .hide() and .show() functions.

Upvotes: 1

Mister Epic
Mister Epic

Reputation: 16723

You shouldn't have multiple IDs, they are supposed to be unique. Update your divs yo use a custom HTML5 data attribute:

<div target-id="1" class="big"><!-- image / video here --></div>
<div target-id="2" class="big"><!-- image / video here --></div>
<div target-id="3" class="big"><!-- image / video here --></div>

And try this:

$('.thumbnails a').click(function(){ 
    var target = $(this).data('target-id');
    $('div').hide();
    $('div[target-id=' + target).show();
 })

Upvotes: 0

Parv Sharma
Parv Sharma

Reputation: 12705

$('div.big').on('click','a',function(){
 $('.thumbnails').find('div').hide();

 var id = $(this).data('id');
 var $e = $('#' + id);
 $e.show();
})

Note - since you cannot have 2 elements with the same id. I have assumed here that you put the id of the div to be shown in the attribute data-id

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10378

in html set a attribute 

    <a rel="1" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a rel="2" href="#"><img src="images/thumb1.jpg" alt="#"/></a>
    <a rel="3" href="#"><img src="images/thumb1.jpg" alt="#"/></a>

</div>

IN JS

  $('a').click(function(){ 
        var target = $(this).attr('rel');
        $('div.big').hide();
        $("div#"+target).show();
     })

Upvotes: 0

Related Questions