Help needed understanding statements in function

Paul, your help is always appreciated!
In fact, had it not been for you I wouldn’t be this far along with the page. :slight_smile:[quote=“PaulOB, post:27, topic:287662”]
the issue seems to me that you should be adding the event listener on the match media once the html has been created and then it will know where it is.
[/quote]

I am trying to work from the concept that @James_Hibbard introduced in post #38 of the unwrap thread.

That concept is what I was referring to in my Toggle Only Page, when I had said this…

Since the ClickHandler function targets everything by way of the .inner div. Then technically the child node locations in the DOM are not effected when the .sidebar div is removed by browsers that don’t support display:contents. This way a page reload is not necessary when the browser window changes widths.

Below that comment in my page was the simple toggle only script that showed how it targets the .inner div with var inner, then function toggleMenuClickHandler locates the button by it’s className.

function toggleMenuClickHandler(evt) {
   var clickedEl = evt.target;
      if(clickedEl.className === "toggle"||"toggle.open") {
         /* toggle the .expand class to UL.menu */
      clickedEl.nextElementSibling.classList.toggle("expand");
         /* toggle the .open class to button */
      clickedEl.classList.toggle("open");
   }
}

var inner = document.querySelector(".inner");
inner.addEventListener("click", toggleMenuClickHandler);

In doing it that way, one clickhandler takes care of all class toggling. On the menu and the button.

I’ve lost my hamburger animation in your example.
That’s what toggling the .open class to the button was doing.

I’m just trying to roll everything together now, as explained on my Slide Toggle page.

I need help setting up a new ClickHandler function for the “Slide Toggle” script (view page source), that targets everything by way of the .inner div.

On that Slide Toggle page I had some comments in the JS, I was hoping they would give some direction to what I am trying to achieve.

Here is the new slide toggle script that @Andres_Vaquero & @Paul_Wilkins helped with. I just need to rework the clickhandler so it works from the .inner div :slight_smile:

var expandableMenu = function(menuNode, handler) {
   var height = menuNode.offsetHeight;
   menuNode.style.height = 0;
   var mql = window.matchMedia('(max-width: 650px)');

   var screenTest = function(e) {
      if (e.matches) {
         console.log('Viewport smaller than 651px');;
         menuNode.style.height = 0;
      }
      else {
         console.log('Viewport larger than 651px');
         menuNode.style.height = 'auto';
         menuNode.classList.remove("expand");
         button.classList.remove("open");
      }
   }
   screenTest(mql);
   mql.addListener(screenTest);

   mql.onchange = function() {
      console.log(mql);
   }

   var toggleClass = function(){
      var isExpanded = menuNode.classList.toggle("expand");
      menuNode.style.height = isExpanded ? height + "px" : 0;
   }
   // New clickHandler would replace this I assume
   handler.onclick = function(){
      toggleClass();
   }
}

var node = document.querySelector('.menu');
var button = document.querySelector('.toggle');
expandableMenu(node, button);

// Toggle the .open class to button for hamburger animations
// New clickHandler function below will replace or include this
button.addEventListener('click', function (){
this.classList.toggle('open');
})

/*
// The clickHandler below needs to be merged into the expandableMenu function above

var clickHandler = function(evt) {
   var clickedEl = evt.target;
      if(clickedEl.className === 'toggle'||'toggle.open') {
      // need to run 'expandableMenu function' from clickedEl.nextElementSibling
      clickedEl.nextElementSibling.----------;
      // toggle the .open class to button for hamburger animations
      clickedEl.classList.toggle("open");
   }
}

var inner = document.querySelector('.inner');
inner.addEventListener("click", clickHandler);
*/
1 Like