Develop Reference

JS toggle for multiple div elements

What should I do if I have multiple elements in HTML foreach and I need to make them all a toggle slider what opens div block with specific information about the element and I need to add close button too if a user wants to close the div. Sorry, I don't have any code to show because I did not find anything that suits my needs. The main idea is to have a product page with products that are displayed on a page using foreach... Then when you click on a product toggle div block is opened with information about a product. What should I search and what to use, I can't find anything because I am limited with my knowledge. Sorry for terrible English.

You can easily control the visibility of an element either within the div you're clicking or after it using a class you toggle. Here's an example controlling the div after one of the divs that controls the toggle:
document.getElementById("container").addEventListener("click", function(e) {
var toggleDiv = e.target.closest(".toggle");
if (toggleDiv && this.contains(toggleDiv)) {
toggleDiv.classList.toggle("closed");
}
});
.closed + .detail {
display: none;
}
<div id="container">
<div class="toggle closed">Product A</div>
<div class="detail">Details about Product A</div>
<div class="toggle closed">Product B</div>
<div class="detail">Details about Product B</div>
<div class="toggle closed">Product C</div>
<div class="detail">Details about Product C</div>
</div>
The key bits there are:
Hiding the details via CSS with the adjacent sibling combinator (+)
Toggling the class on the toggling div
I used event delegation to hook up the handler, but you could instead hook it up to each individual div if you preferred. Note that the Element#closest method I used is relatively new, you may need a polyfill or a loop on parentNode instead.

From what i have understood.
You need to toggle div elements using button tag and the button u click will show that particular div element.
<div id="container1" class={container1 ? "show" : "hide"}>
container1
</div>
<div id="container2"class={container2 ? "show" : "hide"}>
container2
</div>
<div id="container3"class={container3 ? "show" : "hide"}>
container3
</div>
and three button tags to call toggle function to show the three div element.
<div class="container">
<button name="container1" onclick=(toggle())>Container1</button>
<button name="container2" onclick=(toggle())>Container2</button>
<button name="container3" onclick=(toggle())>Container3</button>
</div>
toggle function
function toggle(e) {
if(e.target.name === 'container1'){
container1 = true;
}
else if(e.target.name === 'container2'){
container2 = true;
}
else if(e.target.name === 'container3'){
container3 = true;
}
}
css part
.show{
display: block;
}
.hide{
display: none;
}

jQuery plugin for repeating divs

How do I access, div with class name fire in this for a function or in general access nested div class?
//this doesn't seems to work
function lightCandle(){
$(".fire").show();
}
<div class="dom" id="dom" style="display: none">
<div class="happydiwali" id="happydiwali">
<div class="candle"></div>
<div id="match" class="match"> </div>
<div class="fire" id="fire"></div>
<div class="light"></div>
</div>
</div>

You're showing the .fire element but it's parent .dom element remains hidden because of the display:none.
Show the .dom element as well as .fire:
$(".fire").show().closest('.dom').show();

Make the parent to display: block, and to the child as well.
function lightCandle(){
var dom = $(".dom");
if(dom.css('display') == none){
dom.css('display', 'block');
dom.find('.fire').show();
}
//Or with out condition,
dom.css('display', 'block');
dom.find('.fire').show();
}

Javascript if(condition) then addclass

I'm trying to get a class added on when a div is inside a certain parent div.
<div class="parent1">
<div class="child">
Content
</div>
</div>
.parent1 only exists on one page, while .child exists on others as well as this one.
So when .child is everywhere else, its color is red, but when it's inside .parent1 I want its color to be blue.
Here's what I'm using.
if ($('.child').parents('.parent1').length == 1) {
.addClass('.new-class');
}
I'm having no success with this. Can anyone help?

$(".parent1 .child").addClass("new-class");
Or
$(".parent1>.child").addClass("new-class");
If you want to make sure only first child will be populated with class:
<div class="parent1">
<div class="child"> <!-- will have also "new-class" class -->
<div class="child"> <!-- will NOT have "new-class" class -->
</div>
</div>
</div>

.addClass('.new-class'); adds that class to something. You forgot to tell jQuery what something is, and caused a syntax error instead (which your browser console would have told you about if you had it open). I believe you want this:
$('.parent1 .child').addClass('.new-class');

Well, since you did tag this as just javascript...
HTML
<div class="parent1" id="parent">
<div class="child" id="child">
Content
</div>
</div>
CSS
.has-parent {
color: blue;
}
Javascript
var child = document.getElementById('child');
var parent = document.getElementById('parent');
if (child.parentNode == parent) {
child.className += ' has-parent';
}
DEMO

You could also do this with just CSS:
.child
{
color: red;
}
.parent .child
{
color: blue;
}
So long as the .parent .child rule comes after the single .child rule, it will override the color with blue. No extra work to change the color. If you need this extra class for some other reason the The User 518469 's answer is probably best.

Selecting a parent element (without using Jquery)

I just need to access the parent div where I have a button changing his siblings divs.
A code example can explain better:
<div class="parent"> <!-- This is structure repeats N times -->
<div class="divToToggleVisiblity divA">trololo A</div>
<div class="divToToggleVisiblity divB">trololo B</div>
<button onClick="toggleThem(this)">This button will toggle above divs</button>
</div>
function toggleThem(a){ // something like this, BUT without Jquery
$(a).closest(".parent").find(".divA").hide();
}

That's what parentNode is for:
a.parentNode.querySelectorAll('.divA');

function toggleThem(elem) {
elem.parentNode.getElementsByClassName('divA')[0].style.display = 'none';
}

Swap classes between div's

I have 2 main div's. Group1 and group2. Those group divs contain other 2 (or more) div each. All the div's inside the group's have a class of .grp_item. Now grp_item is display:none and only one div in each group has a class .sel which is display:block .
How can I swap the class .sel between the groups ? Div's inside the groups are the same between them.
Here is the structure:
<div id="group1">
<div class="grp_item">
<div>
Div First
</div>
</div>
<div class="grp_item sel">
<div>
Div second
</div>
</div>
</div>
<div><button id="swap">SWAP</button></div>
<div id="group2">
<div class="grp_item sel">
<div>
Div First
</div>
</div>
<div class="grp_item">
<div>
Div Two
</div>
</div>
</div>
So for this example, when swap button pressed, set .sel in group one to the first Div and in group2 set .sel to Div Two.
Here is the fiddle of the structure: http://jsfiddle.net/d6TFh/
Note that I can't add any more classes in the inner div's so I would imagine I should be first setting the classes to each and then removing them.
Is this possible using .contain() or any other way?

Try this: http://jsfiddle.net/d6TFh/3/
$("button").on("click", function () {
$('div[id^="group"] > div').toggleClass('sel')
});

Based on your conversation with Ayman Safadi I think this is what you are looking for:
var a = $('#anything .sel').attr('id')
var b = $('#something .sel').attr('id')
$('#anything .sel').removeClass('sel')
$('#anything').find('#' + b).addClass('sel');
$('#something .sel').removeClass('sel')
$('#something').find('#' + a).addClass('sel');
And the jsFiddle: http://jsfiddle.net/d6TFh/10/