0

Hello,

I am currently working on modifying particular script I have in place. Specifically, I would like to transition the "open" (services_button) and "close" (services__cancel) buttons into a singular toggle element. Here is the script that I am attmepting to modify. Thank You in advance for the assistance.

<script>
      (function() {
        [].slice.call( document.querySelectorAll( '.services' ) ).forEach( function( el ) {
          var openCtrl = el.querySelector( '.services_button' ),
            closeCtrls = el.querySelectorAll( '.services__cancel' );

          openCtrl.addEventListener( 'click', function(ev) {
            ev.preventDefault();
            classie.add( el, 'services--active' );
          } );

          [].slice.call( closeCtrls ).forEach( function( ctrl ) {
            ctrl.addEventListener( 'click', function() {
              classie.remove( el, 'services--active' );
            } );
          } );
        } );
      })();
    </script> 
2
Contributors
1
Reply
39
Views
1 Year
Discussion Span
Last Post by LaxLoafer
1

Try changing the event listener on line 7 to something like...

openCtrl.addEventListener( 'click', function(ev) {
   ev.preventDefault();
   if (classie.has(el, 'services--active')) {
         classie.remove(el, 'services--active');
    }
    else {
         classie.add( el, 'services--active' );
    }
  } );

You should find your open services button will now toggle. The event listener for the close services button, lines 12-15, can be removed.

Edited by LaxLoafer

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.