Interactive elements


#1

Good day guys!

Currently I am developing new child theme based on McLoohan theme and I have started to face some problems with front-end interactive elements. I am trying to add couple of elements in chapter web-pages with dropdown ability, but looks like I do not finally understand the way it is supposed to be done using PB stock functionality. I tried to reach this approach by means of ‘.dropdown’ class and following the same elements structure like it is done with sidebar table of contents, but the actual behaviour is not working as it is supposed to be.

I tried to allocate JS listeners or CSS interactivity for dropdown elements in McLoohan theme files, but I did not have much success :frowning: Could You please briefly give some hints about better ways to do it using your plugin/theme code. I can do it with my own code snippets somehow, but I really would like to have a consistent design and behaviour with your theme.

Thanks a lot in advance!


#2

This is the code that creates dropdowns:

It’s based on Heydon Pickering’s article on collapsible sections: https://inclusive-components.design/collapsible-sections/

Basically you need to just use the following markup and the built-in CSS/JS will turn it into a dropdown:

<div class="dropdown">
  <p>Dropdown Title</p>
  <ul>
    <li class="dropdown-item"><a href="#">Item One</a></li>
    <li class="dropdown-item"><a href="#">Item Two</a></li>
    <li class="dropdown-item"><a href="#">Item Three</a></li>
  </ul>
</div>

You can see an example of this here:

Hope this helps.


#3

@ned, thank you a lot! I’m sure it will save plenty of my time!