Complex code customization request: add a toggle effect to a navigation

Hello,

another big request, I hope someone can help me, I will give points graciously :wink:

On https://campus.ichblogge.com/lektionen/3-gastgeber-blogs/ you see a navigation with hierarchy: parent category > category > lesson
To make it clear: http://screencast.com/t/WAnq699AQjwT

All CATEGORIES have 2 actions:
1) they link to the respective category page
2) they can be toggled (by clicking the small toggle icon)

I would like to DISABLE THE LINK of the ALL categories in that navigation.
Instead, the toggle effect should not just be on the small icon, but on the whole category (navigation button).

To summ it up: clicking a category should toggle (open/close), clicking a lesson should link to the lesson.

Is this even possible with CSS?
I hope someone has a word of coding-wisdom for me :wink:

  • Adam Czajczyk
    • Support Gorilla

    Hello Julius,

    I hope you're doing fine today!

    This wouldn't be possible with "pure CSS" but should be doable with some additional JavaScript.

    I think you could give this a try for the start:

    jQuery( function( $ ) {
        $( '.ap-c>a:first-of-type' ).click( function( e ) {
            e.preventDefault();
            return true;
        } );
    } );

    This should disable links for categories while keeping links still working for lessons and toggle icon active. The simplest way to apply this to the site would be to use this plugin:

    https://wordpress.org/plugins/code-snippets-extended/

    Please note: in order to use it with this plugin you will need to add

    <script>

    before entire code

    and

    </script>

    after it.

    Let me know please if that works for you.

    Best regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hello Julius!

    I tested this code on your site but since I don't have an access to it, I used browser JavaScript console. That seemed to work but it may be handled a bit differently when served directly from the site.

    Do you think I could give it a try on your site myself? If you granted me a support access to it I could test it and hopefully find a solution for that. Here's a guide on granting support access:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Adam

  • Julius
    • Site Builder, Child of Zeus

    That would be amazing! I just granted access!

    My theme has options for cutom code under dashboard > Thrive Dashboard > Thrive OPtions > Alanytics / Sctipts. I also activated Code Snippets Extended if you prefer this!

    Thank you in advance for your support!

  • Adam Czajczyk
    • Support Gorilla

    Hello Julius!

    Thanks for granting access.

    I checked the site and at first the code didn't work for me either but then I wrapped it in between the "script" tags and it seems to be working now. I put this code into the "Theme Options -> Analytics/Scripts" page into "Footer" position:

    <script>
    jQuery( function( $ ) {
        $( '.ap-c>a:first-of-type' ).click( function( e ) {
            e.preventDefault();
            return true;
        } );
    } );
    </script>

    Can you please clear your browser's cache and confirm if this is now working? Let me know please.

    Best regards,
    Adam

  • Julius
    • Site Builder, Child of Zeus

    It works perfectly now. Thank you so much Adam!!!!

    On "last" question... :wink:

    Now by default all categories are opened (toggled open), what makes the sidebar very long.

    Do you think it would be possible to:
    - "close" all categorie toggles by default
    - open only the one category with the "active" lesson
    ??

    Like for example, loading this site https://campus.ichblogge.com/lektionen/12-schritte-formel/ should load the sidebar looking like this: http://screencast.com/t/mCWtUXFu23If

    I know its getting complicated :wink: just asking if you think it would be easy/hard to do this etc...

  • Adam Czajczyk
    • Support Gorilla

    Hello Julius!

    I can make it to load in a "collapsed" state. I already tweaked the code on your site so please take a look and see if that's how it should be.

    As for making the tabs automatically open for the current lesson (as shown on your screenshot). That unfortunately would be much more complicated. It would require more custom code and most likely some changes in either page templates or widget's code and that would reach a bit outside of the scope of this forum.

    If this is critical for you you may want to post a question about custom development on your "Jobs & Pros" job board (please note: no WPMU DEV staff involved!) here:

    https://premium.wpmudev.org/wordpress-development/

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.