Question

I have made a jQuery toggle for a menu that I had in mind. I was wondering how to make the html arrows to be specific on what the navigation state is i.e. pointing downwards when the navigation is hidden, and pointing upwards when the menu is opened.

My knowledge of jQuery is very basic and this is something that I don’t really understand.

HTML code:

<div class="wrap">
  <nav class="site-nav">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </nav>

  <div class="site-nav-wrap">
    <div class="site-nav-toggle">
      &#x2193; menu &#x2191;
    </div>
  </div>

  <header>
    <h1>Header title</h1>
  </header>

  <article>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla vulputate lectus nec interdum. Praesent dapibus consectetur ante, vel pellentesque metus dapibus sed. Morbi urna tortor, mattis ornare interdum vitae, vehicula eget odio. In mi erat, pulvinar eu convallis non, aliquet eu neque.</p>
  </article>
</div>

CSS code:

.wrap {
  margin: auto;
  width: 320px;
}
.site-nav {
  background: rgb(66,66,66);
  border-bottom: 2px solid rgb(55,55,55);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  display: block;
  float: left;
  margin: 0;
  padding: 0 10px 10px 10px;
  width: 100%;
}
.site-nav-wrap {
  height: 75px;
  float: left;
  overflow: hidden;
  width: 100%;
}
.site-nav-toggle {
  background-color: rgb(200,200,200);
  border-bottom-right-radius: 150px;
  border-bottom-left-radius: 150px;
  color: rgb(3,3,3);
  clear: both;
  cursor: pointer;
  display: block;
  height: 75px;
  line-height: 75px;
  margin: -20px auto 40px auto;
  text-align: center;
  transition: color .5s ease;
  width: 150px;
}
.site-nav-toggle:hover {
  background-color: rgb(3,3,3);
  color: rgb(200,200,200);
  transition: color .5s ease;
}
li { 
  margin-top: 10px;
}

Javascript code:

$(document).ready(function() {

  //Menu Open Seasame Action    
  $('.site-nav-toggle').click(function() {
      $('.site-nav').slideToggle();
  });

  //Hide site-nav content.    
  $(".site-nav").hide();
});

This example can be seen on this jsFiddle: http://jsfiddle.net/FsmhB/14/

Answer 1

I wrap the arrows in spans and hide the up arrow by default. When the click event happens the spans switches hide/show;

HTML

<div class="site-nav-wrap">
    <div class="site-nav-toggle">
        menu  <span>&#x2193;</span><span style="display: none;">&#x2191;</span>
    </div>
</div>

jQuery

$('.site-nav-toggle').click(function() {
    $('.site-nav').slideToggle();
    $(this).find('span:hidden').show().siblings().hide();
});

Fiddle: http://jsfiddle.net/iambriansreed/FsmhB/21/