CODEWITHSUNDEEP
javascriptcssbuttontoggle
Mr Toad
Mr Toad

Reputation: 256

open/close icon - toggle div on click

I have a hamburger menu which drop down feature functions as desired. However, I would like the 3 lines to switch to a cross on click.

I know how to toggle between classes but so far that hasn't worked - I need to toggle the actual div content. The menu-btn is the hamburger and I need to make a new div with a cross in it (still trying to work that out!) - say lets call that button "menu-btn-cross". So on 'button' click, I want to toggle between menu-btn and menu-btn-cross

Any help would be great. Here's what I have so far:

.button {
  position: fixed;
  height: 41px;
  width: 80px;
  z-index: 900;
  right: 0;
}
.menu-btn {
  width: 30px;
  height: 30px;
  padding-left: 30px;
  padding-top: 7px;
  cursor: pointer;
  cursor: hand;
}
.menu-btn span {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px 0;
  background: #FFF;
  z-index: 99;
}
.menu-btn-cross {
  /*my cross will go here*/
}
<div class="button">
  <div class="menu-btn">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div class="menu-btn-cross"></div>
</div>

Upvotes: 0

Views: 4419

Answers (2)

Jesse
Jesse

Reputation: 1262

Here try this. Added class hidden, on div click it toggles that class

fiddle: https://jsfiddle.net/uebnwb6w/

HTML

<div class="button">
            <div class="menu-btn">
                    <span>a</span>
                    <span></span>
                    <span></span>
             </div>

             <div class="menu-btn-cross hidden">
                 <span>test</span>
             </div>
</div>

CSS

.button {
    position:fixed;
    height:41px;
    width:80px;
    z-index:900;
}

.menu-btn {
    width: 30px;
    height:30px;
    padding-left:30px;
    padding-top:7px;
    cursor: pointer; cursor: hand;

}


.menu-btn span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px 0;
    background: #FFF;
    z-index: 99;
}



.menu-btn-cross {

    <!--my cross will go here-->

}

.hidden
{
    display:none;
}
}

JQUERY

jQuery(function($){
             $( '.button' ).click(function(){
             $('.menu-btn').toggleClass('hidden');
             $('.menu-btn-cross').toggleClass('hidden');

             })
        })

Upvotes: 0

vivek
vivek

Reputation: 1605

Try this code.

<script>
    $(function () {
        $('.menu-btn-cross').hide();
    })


    $('.button').click(function () {
        $('.menu-btn').toggle();
        $('.menu-btn-cross').toggle();
    })
</script>

Upvotes: 1

Related Questions