CODEWITHSUNDEEP
htmlsemantic-ui
Élodie Petit
Élodie Petit

Reputation: 5914

Accordion options closes sidebar in Semantic UI

Below is the accordion inside sidebar markup with Semantic UI.

<!DOCTYPE 5>
<html>
  <head>
    <title>App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <div id="app">
      <div class="ui bottom attached segment">
        <div class="ui sidebar vertical left menu borderless sidemenu inverted grey"><a class="item logo"><img src="./assets/icon.png"/></a>
          <div class="ui accordion inverted"><a class="title item"><i class="home titleIcon icon"></i> Dashboard 1<i class="dropdown icon"></i></a>
            <div class="content"><a class="item" href="index.html">Dashboard v1</a></div><a class="title item"><i class="home titleIcon icon"></i> Option <i class="dropdown icon"></i></a>
            <div class="content"><a class="item" href="index.html">Dashboard v1</a></div>
          </div>
        </div>
        <div class="pusher">
          <div class="ui top attached menu"><a class="item"><i class="sidebar icon"></i></a></div>
          <div class="ui basic segment">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Here are the scripts I use to create the sidebar and the accordion:

$('.ui.sidebar').sidebar({ context: $('.bottom.segment') }).sidebar('attach events', '.menu .item');

$('.ui.accordion')).accordion({ exclusive: false });

When I click on the first item of the accordion:

<a class="title item"><i class="home titleIcon icon"></i> Dashboard 1<i class="dropdown icon"></i></a>

sidebar is toggled into hidden mode. Do I forget to add something? I found some samples and themes online, none of them have this problem.

Thanks for the help.

Upvotes: 1

Views: 952

Answers (1)

Saad
Saad

Reputation: 1087

I recommend using onClick event to toggle the sidebar like the following :

$( "#toggle" ).on( "click", function() {
$('.ui.sidebar').sidebar('toggle');
});

Remember to set a selector (id or class) to your triggering element :

<a class="item" id="toggle"><i class="sidebar icon"></i></a>

[DEMO]

Upvotes: 1

Related Questions