Using pure Javascript to show contents of list on click only on mobile and show initially on desktop


Tags: javascript,html,css

Problem :

Is there way I can make a list item to show initially only on desktop and when changing the screen size, the list item is dynamically changed to a dropdown-ish thing, where you have to click the clickable heading to show the contents of it? I want to use pure JS for it.

    <h2 class="clickable-heading">Toggle This Dropdown</h2>

<ul>
    <li><a href="#">How To Do This</a>

    </li>
    <li><a href="#">Installing in The Mid 90s</a>

    </li>
</ul>

<h2 class="clickable-heading">Click This Dropdown 2</h2>

JS:

function toggleDocs(event) {

if (event.target && event.target.className == 'clickable-heading') {

    var next = event.target.nextElementSibling;


    if (next.style.display == "none") {
        next.style.display = "block";

    } else {
        next.style.display = "none";
    }
  }
}

document.addEventListener('click', toggleDocs, true);

This is my Fiddle.

PS: I know it's possible with CSS, using the checkbox hack, but I want to avoid that.



Solution :

You can use window.innerWidth and window.innerHeight to get the window dimensions.

And then depending on these dimensions show/hide the li elements, if you hide them bind the click event to the clickable h2, this is the working code:

function toggleDocs() {
  var next = this.nextElementSibling;
  if (next.style.display == "none") {
    next.style.display = "block";
  } else {
    next.style.display = "none";
  }
}

function checkWindowDimensions() {
  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;
  console.log(winWidth + " ::: " + winHeight);

  var ul = document.getElementsByTagName('ul')[0];
  
  if (winWidth < 300 || winHeight < 300) {
    
      ul.style.display = 'none';
    document.getElementsByClassName("clickable-heading")[0].addEventListener('click', toggleDocs, true);
  } else {
    document.getElementsByClassName("clickable-heading")[0].removeEventListener('click', toggleDocs, true);
    if (ul.nodeType == 1)
      ul.style.display = 'block';
  }
}

checkWindowDimensions();

window.onresize = function(event) {
   checkWindowDimensions();
};
ul {
  display: none;
}
<h2 class="clickable-heading">Toggle This Dropdown</h2>

<ul>
  <li><a href="#">How To Do This</a>

  </li>
  <li><a href="#">Installing in The Mid 90s</a>

  </li>
</ul>

<h2 class="clickable-heading">Click This Dropdown 2</h2>

This is the updated Fiddle.


    CSS Howto..

    Background image cut off outside of item. How can I make it show?

    How can I align unsorted list horizontly ?

    How apply css to div in catch statement using jquery

    How to detect if my search bar has been expanded?

    How to add class based on which css class name is come in jquery

    How to use CSS to create an image overlay effect?

    How to choose second and third element (li) in
      tag (with CSS)?

    How to Prevent Browsers from Caching CSS Files?

    CSS: How do I make a !100% header with a repeat-x background and tip

    How can I create facebook style vertical border line (layout)? :)

    How to include css in my JSP?

    How do I detect box-sizing border-box support with Modernizr

    How to cover piece of border with element over it?

    How to create a dynamically sized form background with CSS?

    draggable without jquery ui: how to stop dragging the not-draggable and type-able elements?

    How to fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content” in joomla

    how to position a div below an absolute div in css

    How to prevent left “post” section from dropping off?

    How to define different css based on element changing number

    How to center a image with transparent background in css?

    How to add composite css -webkit-mask-image?

    How to have this horizontal CSS based navigation menu work properly?

    How to make layout using css and divs?

    How to change font color of select2 control using css

    How to insert CSS code into a page if I can't insert it into head tag? Only inline mode?

    How to don't include the google font css in one specific button only?

    how to format a single html a href text to have multiple css properties (two different font families)

    How to properly float two columns side by side with css

    How to vertically center items in a div while keeping responsiveness? [duplicate]

    How do I stop css pushing
  • to the right?