CODEWITHSUNDEEP
javascriptjqueryhtmlcss
wired
wired

Reputation: 438

show div depending on link clicked

I am trying to make that click on link show specific div. Something like lightbox effect. I managed to make that click on link loads and animate div with class pop but I need to show specific content in it.

<html>
  <head>
    <style>
      .pop{
        background-color: rgba(17,17,17,0.50);
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index: 1000;
        overflow-x: hidden;
        overflow-y: hidden;
        display:none;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.pro a').click(function(event){
          event.preventDefault();
          $('.pop').fadeIn(function(){
            $(this).css({'display':'block'},550);
          });
        });
      });
    </script>
  </head>
  <div class="pro">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
  </div>
  <div class="pop" id="1">
    <div class="mem">profile 1</div>
  </div>
  <div class="pop" id="2">
    <div class="mem">profile 2</div>
  </div>
</html>

I'll appreciate any help. Thanks in advance.

here is jsfiddle

Upvotes: 0

Views: 1832

Answers (4)

DRD
DRD

Reputation: 5813

Here's a CSS-only solution: http://jsfiddle.net/35qnxome/. If you would like to persist the state of your selection, then instead of using tabindex property and :focus pseudo-class combination, you can use radio input and label and :checked pseudo-class.

HTML:

<div class="pro"> 
    <a href="#" data-id="first" tabindex = "1">first</a>
    <a href="#" data-id="second" tabindex = "2">second</a>
    <a href="#" data-id="third" tabindex = "3">third</a>
    <div class="pop" id="first">
        <div class="mem">profile 1</div>
    </div>
    <div class="pop" id="second">
        <div class="mem">profile 2</div>
    </div>
    <div class="pop" id="third">
        <div class="mem">profile 3</div>
    </div>
</div>

CSS:

.pro > div {
    height: 500px;
    display: none;
}

.pro > div:first-of-type {
    background-color: rgba(255, 0, 0, 0.5);
}

.pro > div:nth-of-type(2) {
    background-color: rgba(0, 255, 0, 0.5);
}

.pro > div:nth-of-type(3) {
    background-color: rgba(0, 0, 255, 0.5);
}

.pro > a {
    outline: 0;
}

.pro > a:first-of-type:focus ~ div:first-of-type, 
.pro > a:nth-of-type(2):focus ~ div:nth-of-type(2), 
.pro > a:nth-of-type(3):focus ~ div:nth-of-type(3) {
    display: block;
}

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

You can use html5 data- attribute to achieve this.Add it to the anchor tags to keep track which div to show as popup and utilize its id in the click event:

HTML:

<div class="pro"> 
 <a href="#" data-id="first">first</a>
 <a href="#" data-id="second">second</a>
 <a href="#" data-id="third">third</a>

</div>
<div class="pop" id="first">
    <div class="mem">profile 1</div>
</div>
<div class="pop" id="second">
    <div class="mem">profile 1</div>
</div>
<div class="pop" id="third">
    <div class="mem">profile 1</div>
</div>

JQUERY:

$(document).ready(function () {
    $('.pro a').click(function (event) {
        event.preventDefault();
        $('.pop').hide(); // hide previous popup div
        var id = $(this).data("id"); // get the div id which to show
        $('#' + id).fadeIn(function () {  // show cuurent click link's popup
            $(this).css({
                'display': 'block'
            }, 550);
        });
    });

});

FIDDLE:

http://jsfiddle.net/n7j8o66f/

Upvotes: 2

Juan Jardim
Juan Jardim

Reputation: 2252

You need to hide the last div that you showed. Try this:

var lastElement = null;
$(document).ready(function(){
$('.pro a').click(function(event){
        event.preventDefault();
        $('.pop').fadeIn(function(){
            if(lastElement)
                 $(lastElement).css({'display':'none'},550);            
            $(this).css({'display':'block'},550);
            lastElement = this;
        });
    });

    });

jsFiddle example

Upvotes: 0

j08691
j08691

Reputation: 207901

Try this:

$(document).ready(function () {
    $('.pro a').click(function (event) {
        event.preventDefault();
        $('.pop').hide().eq($(this).index()).fadeIn(function () {
            $(this).css({
                'display': 'block'
            }, 550);
        });
    });
});

jsFiddle example

Upvotes: 0

Related Questions