Develop Reference

I have 3 divs each with it's own topic, and now I would like for each div to open its modal

So far I manage to open one modal by clicking on any of the divs. How can I have one modal for one div element, that is I would like when I click on services to open services modal, and when I click on about to open about modal...and so on..I also have to close every modal when one is opend...I dont know how to connect each div with it's own modal. This is the code I have...
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4 sector">
<h3>Services</h3>
<i class="fa fa-gear"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>About me</h3>
<i class="fa fa-address-card-o"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>Contact</h3>
<i class="fa fa-phone"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-container" id="myMod">
<div class="modal-content">
<span class="close">&times</span>
<h1>Heading</h1>
<p>Some text goes in here...</p>
</div>
</div>
<div class="showcase">
<div class="container">
<h1>Got Ideas?</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed sem rhoncus urna iaculis faucibus. Pellentesque ultrices nibh ac imperdiet tincidunt. Donec hendrerit velit eros</p>
Read More
</div>
</div>
<script type="text/javascript">
// Get the button that opens the modal
var myOver = document.getElementsByClassName('over');
// Get modal to pass it to function
var modal = document.getElementById('myMod');
// get closing button
var span = document.getElementsByClassName('close')[0];
// Function to open the modal
for(var i = 0; i<myOver.length; i++){
myOver[i].addEventListener('click', function(){
modal.style.display = 'block';
});
}
// When the user clicks on <span> (x), close the modal
span.onclick = function(){
modal.style.display='none';
}
</script>

You could use a similar naming scheme and find the right text simply by by appending a suffix to the object that was clicked on's id, for instance have each span element have an id corresponding to the modal they go with. For instance contact then have the click event listener be
function(e) { //e is the event object event
document.getElementById(e.target.id + "-modal").style.display = 'block'
}
now id the contact modal as 'contact-modal' and it should find it easily
As for closing each element, just iterate through all elements with the class modal-contain and set their display to none before opening the
new one

Having to repeat JS block for multiple locations how can I create a more practical method

I am creating kind of a dual navigation menu/map functionality where you can click on certain locations and a new panel will display, hiding the previously viewed panel. Also with a map hover effect. Here is what I'm working on JSFiddle.
I'm trying to figure out a best method to shorten my functions as there would be multiple locations. The block below is what I'm repeating over and over again for new locations. It covers the click and hover on the map. I know repeating the block below isn't practical so I'm hoping someone can guide me.
$('a#united-states').click(function(event){
$('.list').removeClass('current');
$('div.united-states').addClass('current');
event.preventDefault();
})
$('span.us').mouseover(function(){
$('.list').removeClass('current');
$('div.united-states').addClass('current');
}).mouseout(function(){
$('div.united-states').removeClass('current');
$('.list').addClass('current');
}).css('cursor', 'pointer');
HTML
<div class="panel list current">
<ul class="locations">
<li>United States</li>
<li>Canada</li>
<li>Africa</li>
</ul>
</div>
<div class="panel united-states">
<h3>United States of America</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec quam tristique, ullamcorper dolor at, facilisis dui. Sed faucibus eros vel purus finibus congue. Phasellus non ante laoreet, faucibus metus vel, accumsan massa. Sed tincidunt eros sed purus interdum, id vehicula elit rhoncus. </p>
<p>Back to list</p>
</div><!--/.panel-->
The JSFiddle link should give a better idea. If there is not better method, just let me know I'm more than happy to just live with this :) Much appreciated!

Give all the region/country a elements a common class, say region and all the span elements a common class, say pin. Then for each a or span element replace the id with or add a data-attribute matching the region/country. Now, it won't matter how many regions you add, as long as you stick to these simple rules, the following code should work for all the regions/countries:
$('.region').click(function(event){
$('.list').removeClass('current');
var region = $(this).data('region');
$('div.' + region).addClass('current');
event.preventDefault();
});
$('.map > .pin').mouseover(function(){
$('.list,.panel').removeClass('current');
var region = $(this).data('region');
$('div.' + region).addClass('current');
}).mouseout(function(){
var region = $(this).data('region');
$('div.' + region).removeClass('current');
$('.list').addClass('current');
}).css('cursor', 'pointer');
DEMO
EDIT 1:
For the back link to work -- do the following. Change:
<p>Back to list</p>
To:
<p>Back to list</p>
Then add the following code:
$('.back-list').on('click', function(e) {
e.preventDefault();
$('.panel').removeClass('current');
$('.list').addClass('current');
});
You do not want to use duplicate IDs, every ID must be unique. In fact, you may not even need IDs.
DEMO

You can use the id attribute. For example:
$('a').click(function(event){
var loc = this.id; // united-states | canada | africa
if( loc == 'list' ) {
$('.panel').removeClass('current');
$('.list').addClass('current');
return;
}
$('.list').removeClass('current');
$('div.' + loc).addClass('current');
event.preventDefault();
});
and as for the mouse over, you can grab the class attribute and change class 'us' to 'united-states' to be consistent in:
<div class="map">
<!-- changed class to 'united-states' -->
<span class="united-states"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-location-128.png" alt="US location" /></span>
<!-- changed end -->
</div>
$('span').mouseover(function(){
var loc = $( this ).attr( 'class' ); // us | canada | africa
$('.list').removeClass('current');
$('div.' + loc).addClass('current');
}).mouseout(function(){
var loc = $( this ).attr( 'class' ); // us | canada | africa
$('div.' + loc).removeClass('current');
$('.list').addClass('current');
}).css('cursor', 'pointer');

Jquery Open Accordion based on URL anchor hash

I have a FAQ accordion.
Each question has a class name of q with id of q1 or q2 or q3.
Each answer has a class name of a.
When the url has a anchor tag /faq#q2, I want the q2 to be triggered. I have the below code but its the not working.
I think the line that caused it not working is: if (hash) $(.q[id$="+hash+"]).trigger('click'); but i can't figure out whats wrong.
$(document).ready(function($) {
$(".a").hide().first().show();
$(".q:first").addClass("active");
$('#accordion').find('.q').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".a").not($(this).next()).slideUp('fast');
//Find anchor hash and open
var hash = $.trim( window.location.hash );
if (hash) $(.q[id$="+hash+"]).trigger('click');
});
});
.q {cursor: pointer;}
.a {display: none;}
.q.active + .accordion-content {
display: block;
}
<div id="accordion">
<h4 class="q" id="q1">Accordion 1</h4>
<div class="a">
<p>Cras malesuada ultrices augue Open Accordion 2 molestie risus.</p>
</div>
<h4 class="q" id="q2">Accordion 2</h4>
<div class="a">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="q" id="q3">Accordion 3</h4>
<div class="a">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>

First of all - you've lost single or double quotes with your jQuery selector. And if I understand correctly - you want something like this?
if (hash) {
var element = $(hash);
if (element.length) {
element.trigger('click');
}
}
Update (http://jsfiddle.net/6hzby0aa/):
// Hide all panels
$(".a").hide();
// Show first panel by default
$(".q:eq(0)").next(".a").show();
// Get hash from query string. You can put there "#q1", "#q2" or something else for test
var hash = window.location.hash;
if (hash) {
// Get panel header element
var requestedPanel = $(hash);
if (requestedPanel.length) {
// Hide all panels
$(".a").hide();
// Show requested panel
requestedPanel.next(".a").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion">
<h4 class="q" id="q1">Accordion 1</h4>
<div class="a">
<p>Cras malesuada ultrices augue Open Accordion 2 molestie risus.</p>
</div>
<h4 class="q" id="q2">Accordion 2</h4>
<div class="a">
<p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="q" id="q3">Accordion 3</h4>
<div class="a">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>

This is my final Code. Thanks to #Andrew Orlov
<script type="text/javascript">
$(document).ready(function($) {
// Hide all panels
$(".a").hide();
// Show first panel by default
$(".q:eq(0)").next(".a").show();
$(".q:first").addClass("active");
// Get hash from query string
var hash = window.location.hash;
if (hash) {
// Get panel header element
var requestedPanel = $(hash);
if (requestedPanel.length) {
// Hide all panels
$(".a").hide();
$('.q').removeClass("active"); // remove active
// Show requested panel
requestedPanel.next(".a").show();
requestedPanel.addClass("active"); //add active
}
};
$('body').find('.q').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('600');
$('.q').removeClass("active"); // remove active
$(this).addClass("active"); // add active
//Hide the other panels
$(".a").not($(this).next()).slideUp('fast');
});
});
</script>

Add class on specific element without affecting other elements

I'm trying to figure out how I can add class on a specific element without affecting the other elements. Here is the page I have been working on
http://www.digitalspin.ph/test/federalland/careers/
If I trigger the "Send Resume" button. The contact form will slide in from the left. The problem is that it also affects the other elements.
Here is the code I have been working on.
<li id="post-<?php the_ID(); ?>" <?php post_class('six columns job-post'); ?> >
<div class="content">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<form>
<input type="button" class="contact-btn" value="Send your resume">
</form>
<div class="contact-form hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo neque augue, in pellentesque ipsum accumsan eget. Integer efficitur turpis vitae convallis elementum.
</p>
<?php echo do_shortcode('[contact-form-7 id="188" title="Careers Contact Form"]'); ?>
</div>
</div>
</li>
$(document).ready(function(){
$("input.contact-btn").click(function(){
$(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});
});

You can traverse to closest li element using .closest() selector in clicked handler from clicked elements context this. then use .find() selector to target the element with class contact-form:
$("input.contact-btn").click(function(){
$(this).closest('li').find(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});

Thats because you have more than one element that has .contact-form class. I prefer to bind the click event under the form and button container, so will no issues when you re-arrange the elements. Example:
jQuery('.category-job-posts').each(function() {
var $this = this;
jQuery('.contact-btn', $this).click(function(){
jQuery('.contact-form', $this).addClass('animated slideInLeft').removeClass('hide');
});
});

You need to find the closet parent with tagname 'li' to whom the button clicked belongs.
Then once the parent is selected get the element inside it with the 'contact-form' class.
Then just add the required class and remove the 'hide' class.
$("input.contact-btn").click(function(){
$(this).closest('li').find(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});

jQuery fancybox link inside div

I have a div containing information. Wraped around the div I have a 'a' tag so that when a user clicks anywhere around the div the fancy box opens.
However inside the div I andother link that when clicked instead of opening the fancy box it deleted the whole div. I used return false in the click event for the delete which worked.
I have now had to add .live to the click because newly created elemnet were not getting the click event.
Since then though when I click the delete link the div does delete but the fancy box opens also.
Thanks for any help.
$(".listContent").live('mouseenter', function(){
$(this).fancybox({
'type':'ajax',
});
});
$("div.removeCompare").live("click", function() {
$(this).parents(".listingContainer").remove();
return false;
});
Div
<div class="listingContainer grid_9 alpha omega">
<a class="listContent" href="adContent.html">
<div class="listingWrapper">
<div class="grid_8 alpha omega">
<div class="listingContent">
<div class="imgHolder">
<img src="imgs/cars/SearchThumb-10053325.jpg" width="100" height="75">
</div>
<div class="descHolder">
<div id="cars"></div>
<h3>Fancy Car</h3><div class="removeCompare">Remove</div>
<p>Lorem ipsum dolor sit amet, pri ex duis maiorum commune, illud viderer suscipiantur eam an. Dolorum recteque qui in. Pro inani nulla tacimates ex, qu</p>
<span class="listingPrice">€4,000</span>
<span class="listingDate">Listed: Today</span>
<span class="listingLocation">Co. Waterford</span>
<span class="listingViews">Viewed: 20 Times</span>
</div>
</div>
</div>
<div class="goTo goTo_unfocus grid_1 alpha omega">
<div class="gotoWrapper">
Click to View
<div class="imgVeiw"></div>
</div>
</div>
</div><!--End listingWrapper-->
</a>
</div>

Updated:
This code should most probably work.
$(".listContent").live('click', function(e) {
e.preventDefault();
$(this).fancybox({
'type': 'ajax'
});
console.log('inside fancybox creator');
});
$("div.removeCompare").live('mousedown', function(e) {
e.stopPropagation();
console.log('inside remove');
$(this).parents(".listingContainer").remove();
});
I think your problem was with event propagation - when you click on a child element the related event of parent too fires up. So e.stopPropagation() will stop that.

Inside the click event function of the div, unbind the mouseenter event for the inner element (which opens the fancybox), using the .die('mouseenter') event handler unbinding syntax.