[Resolved] Pure CSS accordian with nested links and links stay open on active page

[Max]

Hey Tom

I have lost days looking for a simple, and robust solution for an accordion menu to add to my current GP build.

I have combed the entire wp repository for a decent solution to no avail.

Because you are a CSS guru I thought you might be able to help.

I would like to use pure CSS if possible.

I plan to used an enhanced text widget to add html to create a sidebar menu structured as follows:

Heading 1
Link
Link
Link
Heading 2
Link
Link
Link
Heading 3
Link
Link
Link

CSS Requirements:
1. When a heading is selected it expands to show links (and previously expanded heading collapses)
2. A heading stays expanded if one of links under it is the current/active page being view.

Questions:
1. Can requirement No.2 above be achieved purely with CSS.
2. If yes what would the basic Html and CSS look like to code this.

Thank you in advance for your valuable assistance.

[David]

Hi Max,

to collapse the other elements and to automatically expand them on current page links would require javascript.

You may be better off looking at a plugin such as:

https://wordpress.org/plugins/jquery-collapse-o-matic/

[Max]

Thanks david.

I am not after a plugin.

[Max]

David

I am after a basic solution such as this:

Ridiculously Simple Accordion

That does uses H tags in the HTML which is much better for SEO.

Unfortunately when I tried to run the JS provided in this example it did not work.

See my other forum post located here:

JS not working

[Max]

PS.

I reviewed collapse o matic.

Too complex and not SEO friendly.

[Max]

David

Sub Menu Item Kept Visible

In the thread linked above, it appears Tom has provided a CSS solution for keeping the listed sub menu items open if one of the sub menu pages are active.

[Leo]

I see lots of results when Googling “CSS accordion”.

Have you tried to implement any of them and see if one of them would work for you?

[Max]

Spent hours on codepen etal.
But cant find anything that provide the sublink remain open if relevant page is active option.

[Max]

CSS is preferred to JS/JQ solution because it will work if js is not running in the users browser.

I do not want to use a plugin (cant find a decent one anyway) because most of the menu plugins become unsupported. There are a dozen or more accordion plugins in the repository that have fallen into disrepair.

I also want to avoid a tag, radio button or shortcode solution because it is not SEO friendly.

[Leo]

Then I believe David is correct that it would require javascript as there are certain classes that needs to be added to certain situation, like the WordPress adds the current-menu-ancestor when it’s necessary which is why the CSS solution worked.

Maybe try asking on a site like Stackoverflow just to see if it’s even possible:
https://stackoverflow.com/

[Max]

Better if I rephrase my question so that it is GeneratePress Theme relevant.

My current GP site is running a child theme and a custom functions.php file.

Please explain to me in simple steps how I can run the following script on my site:

`$(document).ready( function() {

// initialize accordion
$(‘.accordion ul’).each(function() {
var currentURI = window.location.href;
var links = $(‘a’, this);
var collapse = true;
for (var i = 0; i < links.size(); i++) {
var elem = links.eq(i);
var href = elem.attr(‘href’);
var hrefLength = href.length;
var compareTo = currentURI.substr(-1*hrefLength);

if (href == compareTo) {
collapse = false;
break;
}
};
if (collapse) {
$(this).hide();
}
});

// on click, show this element and hide all others
$(‘.accordion > li’).click(function() {
var me = $(this).children(‘ul’);
$(‘.accordion ul’).not(me).slideUp();
me.slideDown();
});
});

jQuery(document).ready(function($){
// Get current url
// Select an a element that has the matching href and apply a class of ‘active’. Also prepend a – to the content of the link
var url = window.location.href;
$(‘.items a[href=”‘+url+'”]’).addClass(‘active_page’);
});`

[Max]

Questions relating to GP that I need answered:
1. Do ALL instances of $ in the above code need to be replaced with jQuery?
2. Can I run the above code in the functions.php file in my child theme using the following?:

add_action( 'wp_footer', 'tu_add_script' );
function tu_add_script() { ?>
<script>
[INSERT CODE HERE]
</script>
<?php }

3. OR…Do I have to place this code in a js file in my child theme. Let say with the file name: my-custom.js

4. and then enqueue the script as follows:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/my-custom.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

Thanks in advance for your kind assistance

[Max]

I have just wasted 2 hours on collapse o matic.

It does not provide the one key function I am chasing.

That is, A heading stays expanded if one of links under it is the current/active page being viewed.

I look forward to receiving an answer regarding how to implement the script I posted above on Generatepress.

[Leo]

Looks like that question is the the same as your topic here which we’ve forwarded to Tom:
https://generatepress.com/forums/topic/no-luck-inserting-js-scripts-via-my-child-theme/

If so he will answer in that thread 🙂

Thanks for your patience!

[Author]

Posts