How to leave the Link menu collapsed by default

William Silva Posted in Theme Development 4 years ago

How to leave the

Link menu collapsed by default

GoBlue Theme

appreciate

Replies
us Rishi B Replied 4 years ago

My mistake, there is in fact a much easier way to do this by simply omitting the "in" at the end of the appropriate class.

Locate the following code by viewing source on your newsfeed page:

<ul class="sub-menu collapse in" id="807765384d9d5527da8848df14a4f02f"> 
    ...
</ul>

all you have to do is remove the "in" at the end of the ul class definition and it will appear collapsed by default.

You can do this by modifying the file themes\goblue\plugins\default\menus\sections\newsfeed.php (or whatever your theme is if not goblue). Just modify this code around line 25:

if($name == 'links'){
        $expend = 'in';
        $icon = "fa-newspaper-o";
    }

to

if($name == 'links'){
        $expend = ' ';
        $icon = "fa-newspaper-o";
    }

That should do it. Also just fyi, I was wrong about the id being dynamic - it's an md5 hash of the section name ("links").

us Rishi B Replied 4 years ago

it's not that difficult. Use dev tools to inspect the "Links" element and find the data-toggle attribute. You should find something like this:

<li data-toggle="collapse" data-target="#807765384d9d5527da8848df14a4f02f" class="menu-section-links collapsed active in">
            ...
     </li>

Then, you can add a button to collapse the "Links" submenu (I know you want it auto-hidden, I'm getting to that). You will need to use the data-target we just found like this:

<button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#807765384d9d5527da8848df14a4f02f" aria-expanded="false" id="collapselinks">Simple collapsible</button>

Now, since you want this to happen on page load, just make the button invisible, and use the free Homelancer CSS/JS component to click the button with id=collapselinks on page load. It also might be a good idea to have javascript dynamically find that data-target to use, since it's not specified as a static value in the source (that I could find).

If you want to hire someone to do it for you, you can email me [in my profile].

P.S. There is supposed to be a way to modify the html so that the "Links" submenu would always load collapsed (according to the Bootstrap docs). It's supposed to be possible simply by removing the "in" at the end of the class name specification, but I couldn't get that to work.