CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tafhim
Tafhim

Reputation: 41

How to define if statements for this jQuery code?

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>

Upvotes: 1

Views: 45

Answers (2)

Aniket G
Aniket G

Reputation: 3512

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>

Upvotes: 1

a stone arachnid
a stone arachnid

Reputation: 1289

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>

Upvotes: 1

Related Questions