CODEWITHSUNDEEP
jqueryhtmlcssclick
ac12
ac12

Reputation: 329

Jquery .click multiple divs

I am working in a single page with multiple anchors. Each anchor has separate content to popup when clicked. I have the functionality working but when I click a different anchor it repeats the same content from the first anchor. I need to have each anchor show the corresponding content in the popup. Below is my code. Thank you in advance.

<script>
$(document).ready(function() {
$('a.bio, a.bio2').click(function() {

//Getting the variable's value from a link 

var loginBox = $(this).attr('href');

//Fade in the Popup

$(loginBox).fadeIn(300);

//Set the center alignment padding + border see css style

var popMargTop = ($(loginBox).height() + 24) / 2; 
var popMargLeft = ($(loginBox).width() + 24) / 2; 
$(loginBox).css({ 
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});

// When clicking on the button close or the mask layer the popup closed

$('a.close, #mask').live('click', function() { 
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();  
}); 
return false;
});
});
</script>

The HTML

<a class="bio" href="#login-box">READ BIO &gt;&gt;</a>
     <div class="login-popup" id="login-box">
          <div id="popupimage">
          <h2>This is image 1</h2>
          </div></div>

<a class="bio2" href="#login-box">READ BIO &gt;&gt;</a></div>
     <div class="login-popup" id="login-box">
          <div id="popupimage">
          <h2>This is image 2</h2>
          </div></div>

The CSS

.login-popup {
background: none repeat scroll 0 0 #585858;
display: none;
float: left;
font-size: 1.2em;
height: 350px;
left: 50%;
padding: 20px;
position: fixed;
top: 50%;
width: 500px;
z-index: 999999999;
color:#FFF;
}

Upvotes: 0

Views: 1549

Answers (4)

danielcorreia
danielcorreia

Reputation: 2136

You need to change your html. You can repeat classes as many times as you want, but not ids. Id can only exist once in your html.

  • Where you have class="bio" & class="bio2", change to id="bio" & id="bio2" respectively.
  • Id's "login-box" & "popup-image" should be changed to classes.

In the script where you define the function to the 'click', make an if expression to check whether the link has id bio or bio2.

$('.link').on('click', function() {
    if ($(this).attr('id') === 'bio') {
        // Do something
    } else if ($(this).attr('id') === 'bio2') {
        // Do something else
    }
}

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176896

Problem with you code is here both div having same id login-box.

you need to change id of them , like below do work for you 

<a class="bio" href="#login-box-1">READ BIO &gt;&gt;</a>
     <div class="login-popup" id="login-box1">
          <div id="popupimage-2">
          <h2>This is image 1</h2>
          </div></div>

<a class="bio2" href="#login-box-2">READ BIO &gt;&gt;</a></div>
     <div class="login-popup" id="login-box22">
          <div id="popupimage-2">
          <h2>This is image 2</h2>
          </div></div>

Upvotes: 1

Murat &#199;orlu
Murat &#199;orlu

Reputation: 8545

An html document can have a single element with an id. You have two div with login-box id. You must specify unique ids to each of them:

<a class="bio" href="#login-box-1">READ BIO &gt;&gt;</a>
     <div class="login-popup" id="login-box-1">
          <div id="popupimage-2">
          <h2>This is image 1</h2>
          </div></div>

<a class="bio2" href="#login-box-2">READ BIO &gt;&gt;</a></div>
     <div class="login-popup" id="login-box-2">
          <div id="popupimage-2">
          <h2>This is image 2</h2>
          </div></div>

Upvotes: 1

Guffa
Guffa

Reputation: 700212

You have the same id for both contents. An id has to be unique in the page to work. When the code shows the content, it will show the first one with that id.

Change the id for one of the content elements, so that they are different.

Upvotes: 1

Related Questions