Simple Stack Effects with JavaScript

Question

I'm playing around with https://tympanus.net/codrops/2014/03/05/simple-stack-effects/ right now but I'm struggling to use a link instead of a button as the trigger for this animation.

<button>Click me</button>
<figure class="stack stack-sidegrid">
  <img src="img/1.png" alt="img01"/>
  <img src="img/3.png" alt="img03"/>
  <img src="img/4.png" alt="img04"/>
</figure>

change to

<a href="#">
  <figure class="stack stack-sidegrid">
    <img src="img/1.png" alt="img01"/>
    <img src="img/3.png" alt="img03"/>
    <img src="img/4.png" alt="img04"/>
  </figure>
</a>

This is the js script for handling the event.

(function() {
    [].slice.call( document.querySelectorAll( '.stack' ) ).forEach( function( el ) {
        var togglebtt = el.previousElementSibling,
            togglefn = function() {
                if( classie.hasClass( el, 'active' ) ) {
                    classie.removeClass( el, 'active' );
                }
                else {
                    classie.addClass( el, 'active' );
                }
            };
        togglebtt.addEventListener( 'click', togglefn );
    } );
})();

Does anybody maybe have a suggestion how I get this code to work?

Reference: https://tympanus.net/codrops/2014/03/05/simple-stack-effects/

Just make sure that, after loading document you should call above mentioned JS code. I've made a jsfiddle of above example using anchor tag instead of button & it's working. jsfiddle.net/cq0xfL72 — Prasad Wargad
– Prasad Wargad, Commented Oct 18, 2018 at 6:25

Clocher Zhong · Accepted Answer · 2018-10-18 06:37:02Z

1

Just change var togglebtt = el.previousElementSibling, to var togglebtt = el.parentElement,

like this:

(function() {
    [].slice.call( document.querySelectorAll( '.stack' ) ).forEach( function( el ) {
        var togglebtt = el,
            togglefn = function() {
                if( classie.hasClass( el, 'active' ) ) {
                    classie.removeClass( el, 'active' );
                }
                else {
                    classie.addClass( el, 'active' );
                }
            };

        togglebtt.addEventListener( 'click', togglefn );
    } );
})();

In that demo, togglebtt = el.previousElementSibling is used as trigger,

el is each <figure class="stack ">

its previousElementSibling is <button>Click me</button> according the HTML.

You want to use a link to trigger instead of this button only need to change value of togglebtt.

change it to el or el.parentElement

edited Oct 18, 2018 at 6:37

answered Oct 18, 2018 at 6:25

Clocher Zhong

2,4561 gold badge21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Florian Over a year ago

It works perfectly and thanks to your detailed explanation!! Really appreciate it :) Thanks!

Clocher Zhong Over a year ago

glad to help， it's a demo seems you don't need now...

Collectives™ on Stack Overflow

Simple Stack Effects with JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related