Advertisement
Guest User

Untitled

a guest
Sep 18th, 2019
151
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.57 KB | None | 0 0
  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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement