How can i slidetoggle to the left?

Question

I have two glyphicon which i want to show the information to the left using slidetoggle. But, It opens downward. Please, help.

$(document).ready(function() {
  $('#show_icon,.showhide_icon').hover(function() {
    $(this).next().slideToggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
  <div class="container">
    <div class="nav-header">
      <div class="pull-right hidden-sm">
        <ul>
          <li class="listmenu">
            <div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
            <div id="categories">
              <div CLASS="showhide_icon"><a href="#" title="Login/Register" class="umMenu my-account">Login/Register</a></div>
            </div>
          </li>
          <li class="listmenu">
            <div id="show_icon"><span class="glyphicon glyphicon-shopping-cart"></span></div>
            <div id="categories">
              <div CLASS="showhide_icon"><a href="#" title="Shopping Bag" class="umMenu cart">Shopping Bag</a></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

The CSS Properties goes like this.

CSS Properties

.listmenu {
    float: left;
    width: auto;
    margin-right: 0;
    height: 30px;
    padding: 0 10px;
    overflow: hidden;
}
#categories {
    display: none;
    width: 200px;
}

Possible duplicate of [Slide right to left?](https://stackoverflow.com/questions/596608/slide-right-to-left) — Ivar, Sep 23 '17 at 12:26
I want my slidetoggle just like www.craftisan.in Check the upper right corner. — Rohan Shaw, Sep 23 '17 at 12:59
The placement of elements is set by CSS, so please include the relevant CSS for these elements — FluffyKitten, Sep 23 '17 at 13:17

SLL · Answer 1 · 2017-09-25T19:38:43.067

slideToggle() animates on the height of the element which is why you're seeing it open downward.

If you want a animation like you've linked in the comments use animate() to handle the width of the element. The site linked is using overflow: hidden and changing the width of the container to show the icon only or icon and text.

Edit: After reviewing your question again, a better solution might be to handle this with css:

The html is edited to include only what is needed to make this work. You'll want to review this for your purposes as well:

.listmenu {
  display: inline;
}

.umMenu {
  height: 16px;
  max-width: 14px;
  display: inline-block;
  overflow: hidden;
}

.listmenu:hover .umMenu {
  max-width: 500px;
  /*Can be any # of sufficient width to display all content*/
  transition: 2s;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<header class="masthead">
  <div class="container">
    <div class="nav-header">
      <div class="pull-right hidden-sm">
        <ul>
          <li class="listmenu">
            <a href="#" title="Login/Register" class="umMenu my-account glyphicon glyphicon-shopping-cart">Login/Register</a>
          </li>
          <li class="listmenu">
            <a href="#" title="Login/Register" class="umMenu my-account glyphicon glyphicon-shopping-cart">Shopping bag</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

animate() isn't helping. Please Modify/Correct my code that I've given, If you can. It'll be really helpful. Thank You. — Rohan Shaw, Sep 24 '17 at 14:25

How can i slidetoggle to the left?

CSS Properties

1 Answers1