SHARE
TWEET

Untitled

a guest Sep 18th, 2019 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*The media_action, works as the function that is executed when the screen is less than the selected amount, like 979px such as this case */
  2. function media_action(x) {
  3.   //This var gets the trigger element
  4.    var titles = document.getElementsByClassName("head-4"/*You place here the class of the trigger, you can also use a tag or id*/)
  5.  
  6.    //this conditional checks the width of the screen and see if it matches the selected amount
  7.    if (x.matches) {
  8.  
  9.  let i;/*This is a simple loop for the classname*/
  10.     for(i = 0; i < titles.length; i++){
  11.       //Here we add an event listener on click, and call the function we define later
  12.       titles[i].addEventListener("click", display_child)
  13.   }
  14.   } else {
  15.      let i;//same loop as before
  16.     for(i = 0; i < titles.length; i++){
  17.       /*In this part we especify what will happen when the screen stops matching with the selected width, in this part, i remove the event listener that i added on line 12*/
  18.       titles[i].removeEventListener("click", display_child)
  19.   }
  20.   }
  21. }
  22.  /*This is for future matters, i used this var to toggle beetween the display list as you can see on the next function*/ var toggle = 0
  23.  
  24.  //This is the function that is triggered when the screen reaches the selected width
  25.  
  26. function display_child(e) {
  27.  /*In this 2 variables we get the children elements of the parent*/
  28.   var get_parent = e.target.parentElement//Here we get the parent of the desired element
  29.   var get_children = get_parent.children//We use this function to get all the children of the parent
  30.   //another way to call this is to get all sibling elements
  31.   let i//This is a loop of the parent childrens or siblings if you like
  32.   for (i = 0; i < get_children.length; i++){
  33.     //In this conditional we set the element we wish to target
  34.     if(get_children[i].tagName.toLowerCase() == "ul"/*I use this to target the first ul tag of the parent childrens/siblings*/){
  35.      
  36.       //This action is on your desire, you can perform any action you wish on the selected element
  37. if(toggle == 0){  get_children[i].style.display = "block"
  38.                toggle = 1//as you can see, i used the toggle variable to toggle the display on the ul
  39.                }
  40.   else {get_children[i].style.display = "none"
  41.                         toggle = 0}
  42.     }
  43. }
  44. }
  45.  
  46. var media_listener = window.matchMedia("(max-width: 979px)")//in this matchMedia we specify the screen width you'll use to make the function
  47. media_action(media_listener) // Call listener function at run time
  48. media_listener.addListener(media_action)//This is the listener that's going to trigger the media_action as soon as it matches the width size
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top