Member Avatar for mgreiner28

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
  • 288 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by LaxLoafer
Member Avatar for LaxLoafer

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.