JSFiddle - React, Tailwind, and code Playground
HTML
<!--
the id, "pop-1", is a unique id so that we can target it from JavaScript if need be.
the class "pop" can then be used to apply generic styles or event triggers.
-->
<div id="pop-1" class="messagepop pop">
ANYTHING HERE
</div>
<br /><br />
<br /><br />
<br /><br />
<div id="pop-2" class="messagepop pop">
ANYTHING HERE
</div>
<br /><br />
<br /><br />
<br /><br />
<a href="#" id="contact-1" class="contact">Contact Us</a>
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br />
<br />
<br />
<br />
<a href="#" id="contact-2" class="contact">Contact Us</a>
CSS
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
JavaScript
$(function() {
$(".contact").live('click', function() {
//Note that all pop and contact elements now have
//ids with the format "contact-{id}"/"pop-{id}"
//So, get the {id} value from this element:
var id = $(this).attr("id").split("-")[1];
if($(this).hasClass("selected")) {
//pass the id to deselect, so it knows what to deselect
deselect(id);
} else {
$(this).addClass("selected");
//slideFadeToggle on the appropriate "pop" element.
$("#pop-" + id).slideFadeToggle(function() {
});
}
return false;
});
//.close does not appear anywhere in your HTML
//and so I don't know how it is used. If you wish to call deselect from here
//you'll need to get an id. You can use a similar method to how I've applied
//and fetched id's as with the .pop and .contact links.
$(".close").live('click', function() {
deselect();
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
};
function deselect(index) {
$("#pop-" + index).slideFadeToggle(function() {
$("#contact-" + index).removeClass("selected");
});
}