CODEWITHSUNDEEP
jqueryhtmlcssangularsemantic-ui
SGhaleb
SGhaleb

Reputation: 1007

Sidebar accordion state and icon state

I have a created an vertical accordion menu sidebar. with each accordion going like this:

icon -- name -- icon arrow

<!-- for collapse state add 'very thin' to the sidebar class -->
<div class="ui vertical sidebar menu left overlay visible">
  <a class="item logo">title</a>
  <div class="ui vertical fluid inverted accordion menu">
    <div class="item">
      <a class="title">
        <i class="big home icon left"></i>
        <i class="dropdown icon"></i>
        Size
      </a>
      <div class="content">
        Content
      </div>
    </div>
  </div>
</div>

I want to create an admin type sidebar, on mouse hover it expands to show the accordion, in normal state it shows the icons only.

I would like to know how to remove the text from the sidebar when it is collapse mode.

enter image description here enter image description here

Upvotes: 0

Views: 334

Answers (1)

Simon
Simon

Reputation: 784

Add a Div around the Label and give it a unique className. For example:

<div class="label">Size</div>

In your style sheet reference the parent/child elements accordingly. Something like this:

    .ui.vertical.sidebar.menu.left.overlay.visible .label{
        display: block;
    }

    .ui.vertical.sidebar.menu.left.overlay.hidden .label{
        display: none;
    }

Upvotes: 0

Related Questions