Flexbox Accordion Menu

HTML & CSS
,
1

I’m building a flex accordion menu using the following code

Codepen: flexbox accordion

I wonder if its possible to change the hover-event to an “onclick” event?
Is it also possible to show the first box opened (full width) on page-load?

Any help would be appreciated. Thank you!

2

Remove the hover effect from the CSS:

&:hover {
    flex: 10;
}

And bind a click handler to those li elements, for example using jQuery:

var $elements = $('li.b-accordion__cell');

$elements.click(function() {

  $(this).css({
    'flex': '10'
  });

  $elements.not(this).css({
    'flex': '1 10'
  });
});

Add flex: 10; to the element you’d like to have opened; the selectors are already in the CSS actually:

   &:nth-child(1) {
      background: @color-red200;
      flex: 10;
    }
3

Great! Thanks a lot – works perfectly.

I’m using the menu on a tumblr blog for filtering tags.

Is it possible for the last opened div to stay open on page reload?
Could the selected link (tag) be highlighted on the page?

For example: the user clicks and opens the div “material” and clicks on the tag “wood” – on the new page (all images tagged wood) the div “material” is still open and “wood” is highlighted (bold, underlined etc.)

4

I solved the problem how to highlight the current tag with following javascript

$(function(){ $('a').each(function() { if ($(this).prop('href') == window.location.href) { $(this).addClass('current'); } }); });

I still wonder how to “remember” the last opened tab of the accordion after reloading the page?
I was testing some script with local storage, but it doesn’t seem to work.

$(document).ready(function () { $('.b-accordion').accordion({ header: '.b-accordion__cell', collapsible: true, activate: function(e, ui) { localStorage.setItem('accordion-active', $(this).accordion( "option", "active" )); }, active: +localStorage.getItem('accordion-active') }); });

Any help would be appreciated. Thank you!

5

So how do you actually store the active item, and what is the + in front of localStorage supposed to do? BTW, are you now using jQueryUI instead of a that flex accordion?

6

Still using the the flex according. Just looking for ways to keep the last state open of that accordion. Don’t really know, which direction to go. Read something about localstorage or cookies. Is it possible to combine the flex accordion with jquery for keeping the state?
Here is the last codepen of the menu

Codepen

8

There’s no attempt to use the local storage in that pen, so I can hardly help you debug your code. :confused: From the code you posted above, I can only suggest to remove that + in front of localStorage.getItem('accordion-active'). Also, what does the console say?

You don’t necessarily need jQuery for this; it’s just writing a variable to the local storage really. But since you’re using it anyway, here you go…

var $elements = $('li.b-accordion__cell');

$elements.click(function() {
    localStorage.activeItem = $elements.index(this);
});

$(document).ready(function() {
    if (localStorage.activeItem) {
        $elements
            .get(localStorage.activeItem)
            .css({
                'flex': '3'
            });
    }
});

(Or better still, add an appropriate active CSS class.)

9

Thanks for the code – but it doesn’t seem to work out
After refreshing the page the menu still jumps in its initial state

See Codepen here

11

Oops! :flushed: It’s

$($elements.get(localStorage.activeItem)).css({'flex': '3'});

.get() returns the DOM element, not a jQuery object; hence the error message

TypeError: $elements.get(...).css is not a function

Sorry about that!

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.