Develop Reference

add value to existing class in jQuery

First of all, I have searched quite some hours to find this.. I presume it has an easy fix but I'm really new to jQuery and Javascript, so I'm here for your help.
The problem
I'm working with multiple divs and jQuery ToggleSlide(). I want the script to find the right div to open when I click the corresponding div.
For example, when I click the div 'hackandfly', I want it to open the div 'hackandfly-open'.
The code
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $(this);
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});
HTML
<div class="content projects">
<h3>Projects</h3>
<div class="project project-big hackandfly">
<h3>Hack and Fly</h3>
</div>
<div class="hackandfly-open project-open" style="display: none;">
<img src="images/schiphol-logo.png" class="img-project-open"> Proin nec elit ac sapien facilisis ultrices. Integer pellentesque ex a luctus fringilla. Aenean in quam quam. Integer gravida quam eget mauris laoreet hendrerit. Vestibulum feugiat ipsum id.
<br>
<br>
Metus aliquet iaculis. Proin massa justo, maximus in tortor et, Proin massa justo, maximus in tortor et. In aliquam laoreet magna et iaculis. Vestibulum vel orci lobortis, elementum nulla eget, porta eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<br>
<br>
Proin massa justo, maximus in tortor et, tincidunt efficitur nibh. Mauris vulputate euismod lorem, vel rutrum ipsum iaculis eu.
</div>
So what I'm looking for, is that when I push 'hackandfly' div, 'scanergy' div or the 'connecting-food' div, I want it to slideToggle the corresponding div that has -open behind it (I have 3 divs with info called hackandfly-open, scanergy-open, connecting-food-open).
I tried some things like:
$slidah = $(this).after('-open');
And some other stuff but it didn't work. Who can help me?
Cheers!

Use attr() like
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $($(this).attr('class')+'-open');
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});
However, the above will fail if you have multiple classes.
A workaround would be to add data-* to the clicked elements like
<div class="hackandfly other-class" data-class-target="hackandfly-open"></div>
and then
$(document).ready(function() {
$('.project-open').hide();
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $('.'+$(this).attr('data-class-target'));
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
});
});

I would generate a unique click handler for each class. That way, you can store all the applicable class names in an array:
// Creates a new unique click function for each class name
function generateClickHandler(className) {
return function(e) {
// select the open class here
$slidah = $('.'+className+'-open');
$slidah.slideToggle();
$('div.project-open').not($slidah).slideUp();
};
}
// Iterate over all the class names and add a new function for each
var clsList = ["hackandfly", "scanergy", "connecting-food"];
$.each(clsList, function(className) {
$("."+className).click(generateClickHandler(className));
});

Use:
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$slidah = $("."+$(this).attr('class')+"-open");
$slidah.slideToggle();
});

If you added a wrapper around each section like so:
<div class="content projects">
<h3>Projects</h3>
<div class="project-wrapper">
<div class="project project-big hackandfly">
<h3>Hack and Fly</h3>
</div>
<div class="hackandfly-open project-open" style="display: none;">
{...}
</div>
</div>
</div>
you could use parent and find to get the corresponding element as follows:
$('.hackandfly, .scanergy, .connecting-food').click(function() {
$(this).parent().find('.project-open').eq(0).slideToggle();
}

How to make next div open when previous closes using jquery?

I have tried so far and made some pretty long code. This seems okay when one is having less then five or ten divs. But what if these are to be implemented on 20 or more than that....?
Can there be any compact form of the code I have tried to write.
( I am some novice in jquery to build complex function but try to write these sorts. )
Any one can help..?
Fiddle is here : http://jsfiddle.net/Ud574/27/
The Code is as follows.
$(document).ready(function(){
$('.button').click(function() {
$('.content').hide(500)
$('.headOne').addClass("classRight");
$('.content1').show(500)
});
$('.button1').click(function() {
$('.content1').hide(500)
$('.headTwo').addClass("classRight");
$('.content2').show(500)
});
$('.button2').click(function() {
$('.content2').hide(500)
$('.headThree').addClass("classRight");
$('.content3').show(500)
});
$('.button3').click(function() {
$('.content3').hide(500)
$('.headFour').addClass("classRight");
$('.buttonLast').click(function() {
$('.content').show(500)
$('.headOne,.headTwo,.headThree, .headFour').removeClass("classRight");});
});
});
<doctype html>
<html>
<head>
<title> div collapse</title>
</head>
<body>
<div class="headOne"> Emplyee personal record</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum <br />
<div class="button">Click me</div>
<br />
</div>
<div class="headTwo"> Emplyee personal record</div>
<div class="content1">Pellentesque felis elit, tempor vitae dapibus facilisis, sollicitudin id diam. <br />
<br />
<div class="button1">Click me</div>
</div>
<div class="headThree"> Emplyee personal record</div>
<div class="content2">Aliquam id lectus pellentesque viverra<div class="button2">Click me</div></div>
<div class="headFour"> Emplyee personal record</div>
<div class="content3">Aliquam a magna ac lacus eget porta. Maecenas viverra mi id lectus pellentesque viverra</div>
<div class="button3">Click me</div><br />
<br />
<div class="button4">Go To Previous section </div></div>
<div class="buttonLast">Go To Previous section </div>
</body>
</html>

If I understand correctly, you need something similar to the Accordion control.
Have a look at jQuery UI Accordion on the following url: http://jqueryui.com/accordion/
Does this sound reasonable to you?

I played with your code a bit and simplified it a lot, using built-in jQuery functions. Here's the HTML:
<div class="closable"> Employee personal record
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum ullamcorper convallis.
</div></div>
<div class="closable"> Employee personal record
<div class="content">Pellentesque felis elit, tempor vitae dapibus felis eu erat. <br />
</div></div>
<div class="closable"> Employee personal record
<div class="content">Aliquam eget porta. Maecenas viverra mi id lectus pellentesque viverra</div></div>
<div class="closable"> Employee personal record
<div class="content">Aliquam a magna ac justo accumsan porttitor.</div></div>
<div class="button4">Go To Previous section </div></div>
Here's the Javascript:
$(document).ready(function(){
$('.content').first().show();
$('.closable').click(function() {
if ($(this).find('div').first().is(':visible')){
$(this).find('div').first().hide();
$(this).next().find('div').first().show();
}else{
$(this).find('div').first().show();
}
});
});
And the CSS:
.content{display:block;}
.content{font-weight: normal; border: 0;display:none;}
.closable{font-weight:bold;border:1px solid #CCC;}
Hope this helps!

jQuery popup box only show once in foreach loop

First, let me explain the purpose of the popup. I have a list from a database of products, in a foreach loop.
Now I added code so that when you click the product, it opens a new box and shows content about this product. But for some reason, it only works on the first product.
I will post the code here, since I am very bad at jQuery/Javascript.
Here is the jquery script:
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#wiki-button').on('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#wiki-content').bPopup();
});
});
})(jQuery);
A snippet from the loop:
foreach ($getTheOffers as $getTheOffer ) { ?>
<div id="wiki-content">
<div class="box9">
<h1>Sample Box</h1>
<img src="imageurl">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p><br/>
</div>
</div>
<?php } ?>
If you need to see more code, I will post it in pastebin.

Use class instead of id
So, in your HTML
<div class="wiki-content">
And in your jQuery
$('.wiki-button').on('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$(this).bPopup();
}

Change id to class. Id should be unique otherwise only the first element will be select
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('.wiki-button').on('click', function(e) {
//___^_____________
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('.wiki-content').bPopup();
// ___^___________
});
});
})(jQuery);
foreach ($getTheOffers as $getTheOffer ) { ?>
<div class="wiki-content">
<!-- _____^____________________-->
<div class="box9">
<h1>Sample Box</h1>
<img src="imageurl">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p><br/>
</div>
</div>
<?php } ?>

Problem:
You have repeating ID's. The ID selector only expects one result, and gives you one, the first element. Hence, only the first is working.
Solution:
Use classes! Give a common class to your repeating elements and target that.

Correctly creating multiple instances of lightbox for website

I am seeking to use a jQuery / JS lightbox I found across a 1 page website, I'd like to use it 7 times to hold 7 unique sets of content but I am failing to implement it correctly for the other 6 instances.
$(document).ready(function() {
var lightBox = $('#lightbox'),
lightBoxContent = $('#lb-content');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 400,
lbContent = $('#lb-content');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() - 150 + 'px'
});
};
$('#search-submit').click(function() {
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
});
Mark-Up:
<!-- light box -->
<div id="lightbox"></div>
<div id="lb-content">
<span id="lb-close">x</span>
<h1>More content here.</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec commodo justo. Suspendisse vel facilisis enim. Nulla lorem ante, auctor et malesuada ac, porttitor in lectus. Fusce congue pharetra tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam dapibus nec neque ut accumsan.</p>
</div>
<!-- // light box -->
Duplicating the code in 6 new instances didn't work either.
$(document).ready(function() {
var lightBox = $('#lightbox2'),
lightBoxContent = $('#lb-content2');
var positionLightbox = function() {
var veiwWidth = $(window).width(),
lbContentMargin = (veiwWidth / 2) - 400 + 'px',
lbContent = $('#lb-content2');
lbContent.css({
'left' : lbContentMargin,
'top' : $(window).scrollTop() - 350 + 'px'
});
};
$('#search-submit2').click(function() {
lightBox.fadeIn(function() {
lightBoxContent.show();
});
positionLightbox();
});
$('#lb-close2').click(function() {
lightBox.hide();
lightBoxContent.hide();
});
});

Not 100% sure where the other content is or supposed to be but, assuming your lightbox code is correct and your html too (for what you need it to do) then you dont need to repeat the jquery code 7xs. Keep the same code and ............. lets assume that you have this html as your content
<div id="lightbox"> content here to be lightboxed </div>
<div id="lightbox2"> content here to be lightboxed </div>
<div id="lightbox3"> content here to be lightboxed </div>
<div id="lightbox4"> content here to be lightboxed </div>
<div id="lightbox5"> content here to be lightboxed </div>
<div id="lightbox6"> content here to be lightboxed </div>
<div id="lightbox7"> content here to be lightboxed </div>
then in your jQuery, you put all these id selectors in your code as follows.
$(document).ready(function() {
var lightBox = $('#lightbox, #lightbox2,#lightbox3,#lightbox4,#lightbox5,#lightbox6,#lightbox7'),
lightBoxContent = $('/* same here for the 7 lb-content 1 through 7 */ ');
etc
Essentially, group all your selectors to reuse the same code.

Accordion slider not close previous tab on click other tab

I am using the jquery accordion for display information for a website. i make the slider opens when the user clicks the specific link in the sub-menu like.
Facilities--> 1. Rooms
2. Hospitality
3. Green Walk
4. Book Options
If user click the any of the sub-menu the respected accordion tab will be open. with the below code i make it.
<script type="text/javascript">
jQuery(function () {
jQuery("#accordion").accordion();
});
jQuery(document).ready(function () {
$(<%=m_id %>).next().toggle('slow'); //<%=m_id%> the id of every tabs of accordion i pass form the code behind in asp.net
});
</script>
HTML:
<div id="accordion">
<h3 id="rooms">
a href="#">Rooms</a></h3>
<div id="rooms">
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
</p>
</div>
<h3 id="Hosp">
a href="#">Hospitality</a></h3>
<div id="Hosp">
<p>
High Performance team Building, Leadership
Development Program, Train the Trainers, Introduction to NLP and Advanced NLP, Fire-Walk
etc.
</p>
</div>
<h3 id="green">
Green Walk
<div id="green">
<p>
et malesuada fames ac turpis egestas. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean
lacinia mauris vel est.
</p>
</div>
<h3 id="book">
Book Options</h3>
<div id="book">
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
so, here the issue is when the user click the next sub-menu or click the next tab in the accordion the previous one is remains open.
How to close the opened tab when the next tab is open.

i got that accordion to work fine with this javascript
<script type="text/javascript>
var i=0;
$(document).ready(function () {
jQuery('#accordion').accordion();
autoHeight: true;
$('#<%=m_id %>').next().slideDown('slow');
$(document).click(function(){
if(i==0){$('#<%=m_id %>').next().slideUp('slow');i++}else{$('#<%=m_id %>').val('');}
});
});
</script>