Develop Reference

How to shrink element by clicking on it or either of its siblings - vanilla js (may be useful for styling effects or accordion)

I have three panels, one by another in a row. When I click on one of them, its width increases. When I click on any of other two, the panel which previously increased width shrinks and the newly clicked panel widens. However, I would like to be able to shrink the just widened panel by clicking on it. I am struggling to find the solution but with no effect.
This is my code:
var panels = document.querySelectorAll('.panel'),
activePanel = document.querySelectorAll('.panel.open');
function toggleOpen() {
panels.forEach(function(item) {
if (item.classList.contains('open')) {
item.classList.remove('open');
item.classList.add('closed');
}
});
this.classList.remove('closed');
this.classList.add('open');
}
function closeActivePanel() {
if (activePanel.length > 0) {
activePanel.removeClass('open');
activePanel.addClass('closed');
}
}
panels.forEach(function(panel) {
panel.addEventListener('click', toggleOpen);
});
activePanel.forEach(function(aPanel) {
aPanel.addEventListener('click', closeActivePanel);
});
<div class="panel panel1">
<div class="panel__overlay"></div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="panel panel2">
<div class="panel__overlay"></div>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="panel panel3">
<div class="panel__overlay"></div>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsume</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
The function closeActivePanel just does not fire. And there is no error message.

The Time you query the DOM for the .panel.open elements they don't exist. You have to add the listener after you've added the class "open" to the element or implement a toggle logic in the click handler for the .panel elements.

Finally I found the solution for my problem. I think it would be very useful for accordion element for example. The goal was to have the possibility to increase width of one of elements by clicking on it (class 'open' produces this effect). And then to shrink it either by clicking on this element of any of other two beside it. Having the effect of shrinking the wide element by clicking on other two elements was easy. But to add functionality to shrink it by clicking on itself was quite a gymnastics. Event delegation turned out not to be helpful as I needed to know exact target of the event. Here is what I found working:
var panels = document.querySelectorAll('.panel');
function togglePanels(event) {
var target = event.target;
panels.forEach(function(item) {
if(item != target) {
item.classList.remove('open')
};
});
target.classList.toggle('open');
}
panels.forEach(function(panel) {
panel.addEventListener('click', togglePanels);
});

Slide Toggle Won't Activate On Class

I looked up many questions on this topic and there are similar answers that should work, but it's not working for me. I admit DOM traversal is not my strong point, so if you have a solution and can give some context it would really help me understand why the other solutions weren't working.
I have a div with a button and on a button click (this button only appears on mobile) it should slide down only the current div content. I can get this to work, but the issue is it opens up ALL the divs content. I cannot however get it to only open the specific card even using solutions such as $(this), $(next), $(prev) or $(find).
The code I am posting below does not open it at all, and I am using this version of the code because it is most similar to answers on Stack Overflow.
$(document).ready(function(){
$('.mobile-icon').on('click', function(){
event.preventDefault();
$(this).next().find('.card-bottom').slideToggle();
console.log('hi there'); //this does print
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->

The main issue is how you're using jQuery's .next() and .find(). Since $(this) is the <a> tag, .next(), which selects the next sibling, is the <p> tag. Then calling .find() on the <p> tag would check through all its descendants, for which there are none.
Therefore you need to select the parent of both the 'card-top' and 'card-bottom' divs before you traverse down with .find().
For example:
$(document).ready(function(){
$('.mobile-icon').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.card-bottom').slideToggle();
});
});
The first call to .parent() will be the parent of the <a> tag, which is the 'card-top' div, and the .parent() of that will be the 'card' div. Then calling .find() will work.
http://www.bootply.com/UMwXaOILHv

Missing the closing " on class="card>
Add event to function() so it's function(event)
If you don't need to link anywhere use a div instead of an a tag and you won't need preventDefault.
$('.mobile-icon').on('click', function(event) {
event.preventDefault();
$(this).closest('.card').find('.card-bottom').slideToggle();
// .closest finds the nearest .card ancestor (it goes up)
// .find then finds .card-bottom within the closest .card
});
.mobile-icon {
background-color: black;
width: 100px; height: 40px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<div class="mobile-icon">click me</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
click me
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
fiddle
https://jsfiddle.net/Hastig/m2zaLfnz/

Cycle2 - Can't initialize the slider

Hopefully someone can help me with this. I am not an expert on use of Cycle2 jQuery plugin and I would like to implement it. Supposedly Cycle2 is supposed to be able to slide composites and that is what I am trying to do.
I have html that looks like the sample below. The code is actually generated by djangocms and I don't have the ability to add attributes to the html structure unless I am adding them using JavaScript...
So I suppose I am left with one option and that is to initialize the slider using this:
$('.cycle-slideshow').cycle();
But that doesn't seem to do anything.
I also tried this:
// Cycle Slideshow
$('.cycle-slideshow').attr('data-cycle-fx', 'scrollHorz');
$('.cycle-slideshow').attr('data-cycle-timeout', '2000');
$('.cycle-slideshow').attr('data-cycle-slides', '> div');
My HTML structure...
<div class="cycle-slideshow">
<div class="slider">
<h2>Teaser Title 1</h2>
<img src="/media/cms_page_media/2014/8/20/Banner1.png" alt="Teaser Title 1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="slider">
<h2>Teaser Title 2</h2>
<img src="/media/cms_page_media/2014/8/20/Banner2.png" alt="Teaser Title 2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="slider">
<h2>Teaser Title 3</h2>
<img src="/media/cms_page_media/2014/8/20/Banner3.png" alt="Teaser Title 3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="slider">
<h2>Teaser Title 4</h2>
<img src="/media/cms_page_media/2014/8/20/Banner4.png" alt="Teaser Title 4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

The reason why that might not work is because Cycle 2 Inits all slideshows right after it loads the plugin, so your jQuery won't affect your slideshows, because Cycle 2 has already been initialized.
What happens if you add the attributes and THEN init the slideshow:
$('.cycle-slideshow')
.data('cycle-fx', 'scrollHorz')
.data('cycle-timeout', '2000')
.data('cycle-slides', '> div')
.cycle();
You can also, try to pass your options as an object to your slideshow:
$('.cycle-slideshow')
.cycle({
'fx' : 'scrollHorz',
'timeout' : 2000,
'slides' : '> div'
});
Finally, you also try re-writing the cycle 2 defaults in order for all your slideshows to work accordingly. This should be avoided unless necessary, but it might work!
$.fn.cycle.defaults = $.extend($.fn.cycle.defaults, {
'fx' : 'scrollHorz',
'timeout' : 2000,
'slides' : '> div'
});
$('.cycle-slideshow').cycle();
UPDATE:
You might want to re-write the defaults before $(document).ready so that cycle uses your default options when initiating the plugin. It automatically calls itself on $(document).ready.
Source Code:
https://github.com/malsup/cycle2/blob/master/src/jquery.cycle2.core.js#L678-L681

Expand/Collapse HTML divs simultaneously

I am trying to create a row of HTML divs that expand and collapse when you click on them. Please see this jsFiddle to get an idea of what I mean: http://jsfiddle.net/Lm6Pg/3/. (You may have to expand the result pane or use the full screen result to get all the divs to appear on a single row.)
Currently, I am using One% CSS Grid to get all the divs to appear on one row, then toggling different CSS column classes to expand and collapse the divs according to the current state and what div was clicked.
<div id="content" class="onepcssgrid-1200">
<div class="onerow">
<div class="tile col4" id="about">
<h3>About</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="tile col4" id="other">
<h3>Other</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="tile col4 last" id="stuff">
<h3>Stuff</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
Here is my javascript (I've changed it from what's in the jsFiddle because I was messing around with dynamically determining which column classes needed to be toggled):
$(".tile").click(function() {
var tile = $(this);
var otherTiles = tile.siblings();
var currentSelectedTile = otherTiles.filter(".selected");
var unselectedOtherTiles = otherTiles.not(".selected");
var otherTileWeight, tileWeight;
if (currentSelectedTile.length) {
otherTileWeight = 3;
tileWeight = 3;
} else {
otherTileWeight = 4;
tileWeight = 4;
}
tile.toggleClass("selected col" + tileWeight + " col6", 600);
currentSelectedTile.toggleClass("selected col3 col4", 600);
unselectedOtherTiles.toggleClass("col" + otherTileWeight + " col3", 600);
});
This seems like a lot of code that might be wrapped up in a jQuery UI function or some other library that eluded me when I put this together. Is there an easier, more concise, or just plain better way to do this? The solution does not need to use jQuery nor One% CSS Grid, any library is fine. However, it does need to be in a responsive layout that preferably still functions as you'd expect when the divs are on top of each other.

Show/Hide Multiple Divs

I am trying to trigger a show/hide of one div at a time.
What is happening is that all the divs (.shareLink) are opening at the same time.
Below is my jQuery:
$(document).ready(function(){
$(".shareLink").hide();
$("a.trigger").click(function(){
$(".shareLink").toggle("400");
return false;
});
});
Below is my HTML:
<dl class="links">
<dd>content</dd>
<dt class="description">content</dt>
<ul class="tools">
<li><a class="trigger" href="#">Share Link</a></li>
</ul>
</dl>
<div class="shareLink">
<?php print check_plain($node->title) ?>
</div>
Any help with the above problem would be much appreciated.
Cheers.

Based on your HTML, you need to do this:
$(function() {
$("div.shareLink").hide();
$("a.trigger").click(function(){
$(this).parents('dl.links').next('div.shareLink').toggle(400);
return false;
});
});
This walks up to the parent DL and then moves over to the next shareLink div and toggles it.

$(".shareLink").toggle("400");
Refers to any div on the page with a class of ".shareLink".
You will need to find a way to distinguish the specific div you want to show.

You might want to try:
$(document).ready(function(){
$(".shareLink").hide();
$("a.trigger").click(function(e){
e.preventDefault();
$(this).next().toggle("400");
});
});
The answer is it depends on the structure of your document. Here is a sample of something that will work with the above function.
<a class="trigger">click here</a>
<div class="shareLink">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>