How to define if statements for this jQuery code?

Question

I wrote a toggle burger menu. I want to tell this code to hide <div class="line1"></div> and <div class="line3"></div> when the .menu is clicked.

How can I do this?

$(function(){

  $('.menu').click(function(){
    $('.sidebar').toggle();
  });

});

.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
  position:relative;
}

.menu > div {
  background-color:black;
  width:22px;
  height:1px;
}

.line1 {
  top:12px;
  position:absolute;
}
.line2 {
  top:16px;
}
.line3 {
  top:22px;
}
.sidebar {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
  
  
  
    <div class="sidebar">
        Sidebar
    </div>

Possible duplicate of How to show/hide DIVs with jQuery

Heretic Monkey
– Heretic Monkey

2019-02-18 19:21:56 +00:00
Commented Feb 18, 2019 at 19:21 — Heretic Monkey
– Heretic Monkey, Commented Feb 18, 2019 at 19:21

a stone arachnid · Accepted Answer · 2019-02-18 19:21:58Z

1

If you want to make it hide and then show, use .toggle(), like this:

$(function(){

  $('.menu').click(function(){
    $('.sidebar').toggle();
    $(".line1").toggle();
    $(".line3").toggle();
  });

});

.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
  position:relative;
}

.menu > div {
  background-color:black;
  width:22px;
  height:1px;
}

.line1 {
  top:12px;
  position:absolute;
}
.line2 {
  top:16px;
}
.line3 {
  top:22px;
}
.sidebar {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
  
  
  
    <div class="sidebar">
        Sidebar
    </div>

answered Feb 18, 2019 at 19:21

a stone arachnid

1,3061 gold badge18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aniket G · Accepted Answer · 2019-02-18 19:25:39Z

Use jQuery .hide()

If you want to show it again, use .show() the same way you used .hide()

Go to the following links to learn more

Hide: http://api.jquery.com/hide/

Show: http://api.jquery.com/show/

I updated your snippet below:

$(function(){

  $('.menu').click(function(){
    $('.sidebar').toggle();
    $(".line1").hide();
    $(".line3").hide();
  });

});

.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
  position:relative;
}

.menu > div {
  background-color:black;
  width:22px;
  height:1px;
}

.line1 {
  top:12px;
  position:absolute;
}
.line2 {
  top:16px;
}
.line3 {
  top:22px;
}
.sidebar {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
  
  
  
    <div class="sidebar">
        Sidebar
    </div>

Or you can use .toggle()

http://api.jquery.com/toggle/

$(function(){

  $('.menu').click(function(){
    $('.sidebar').toggle();
    $(".line1").toggle();
    $(".line3").toggle();
  });

});

.menu {
background:#ddd;
padding:15px;
width:fit-content;
height:fit-content;
  position:relative;
}

.menu > div {
  background-color:black;
  width:22px;
  height:1px;
}

.line1 {
  top:12px;
  position:absolute;
}
.line2 {
  top:16px;
}
.line3 {
  top:22px;
}
.sidebar {
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="menu">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
  
  
  
    <div class="sidebar">
        Sidebar
    </div>

Collectives™ on Stack Overflow

How to define if statements for this jQuery code?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related