How To Create Drop Down List In Wordpress

Style the PDF viewer containers with display: none; so none are displayed initially.
Add jQuery code to change the display style to block on the click event of the related text element. The text element will be easier to target with jQuery if it were contained within a div container with a specific class attribute.

You could use the mouseenter event instead of click but I don't think it'll make for a good UX. The click event should toggle between display block and none so users can re-hide the PDFs.

Your page already has the jQuery module loaded for mega menu, so you only need to add the code specific to PDF display.

That sounds absolutely brilliant, however im a noob.
Mind helping me with Jquery while im trying to figure it out myself?
Tried editing the PDF embedder's container in css but so far what i achieved was spilling grey color over the entirety of the pdf.

That's one way to hide the content 🙂 I assumed you wanted the initial PDF display collapsed so all that's displayed is the text, as though there were no PDFs at all. To do so, add

          .pdfemb-viewer {     display: none; }

to the Additional CSS panel of the customizer. Before you do that, develop the related jQuery to toggle a viewer's visibility on and off. As I mentioned, the text block should be wrapped in a div with a specific class attribute. In the following example, lets say the class is "toggle-pdf".

WP runs in noConflict mode, so if you want to use the $ shortcut for jQuery, your script needs to be inside a "noConflict wrapper". There are user notes with examples near the bottom of the docs page for wp_enqueue_script().

Add listeners with a handler for all "toggle-pdf" classes:

          $(".toggle-pdf").on("click", function(){   //code here to get the viewer element occurring after the clicked element   //determine the current style.display property of the viewer   //toggle the style.display property accordingly });

Within the closure function use this to reference the element clicked on. I leave development of the closure function to you.

Okay, well im not exactly sure what im doing, but i think i got some progress with your godsent help, where exactly should i put the css code though? Into the ubermenu additional css panel? Into the theme file's additional css panel (it doesnt have one) or into PDF embedder plugin's via the CSS editor?

This reply was modified 1 year, 10 months ago by sajtoslecso.

The first snippet I provided is CSS that can go in the Additional CSS panel.

The other is jQuery/JavaScript that ought to go in its own file. This file should reside in either a child theme or your own custom plugin. It's easier than it might sound. If you will need custom templates for other reasons, you should go the child theme route. Otherwise a plugin is a little easier to create.

To get the JS file loaded on a page, you need some PHP code which goes in the plugin's main file or child theme's functions.php. The PHP code needs to hook the wp_enqueue_scripts action. The callback function calls wp_enqueue_script() to get the JS file loaded on your page. For the $deps argument pass array['jquery'] to ensure your code is loaded after jQuery is loaded. Look for example code in user notes of each docs page the will help you learn how to do all of this. While not a one shot tutorial, you should be be able to piece something together.

You should never alter other WP code files because your alterations will be lost when that module gets updated. This is why you should create your own child theme or plugin.

Thank you very much for the help provided! While trying to write and researching the script, i accidentally found a plugin that did what i wanted, but i'll use the above written snippets to practice for the future.

You're welcome. I'm glad you found a solution. Examining the source code of a plugin that does something like a subject you've been struggling with can be a good way to improve your coding skills.