How can I stop my center div from changing position after I SlideUp another divs?

by

I’m creating simple page with a <header> and a <section>. In the section I have 3 divs and I am positioning them with display: flex; and justify-content: space-between.

The problem is that I also use JS slideToggle() on two of them (extreme ones). It is changing the layout of my center div after they are going up. How can I do it so that my center div doesn’t change position after one of the others is slid up?

$(document).ready(function() {
  $('#playlist').click(function() {
    $('#nav').slideToggle();
  });
});

$(document).ready(function() {
  $('#songs').click(function() {
    $('#listSongs').slideToggle();

  });
});
section {
  display: flex;
  justify-content: space-between;
}

#listSongs {
  margin-top: 50px;
  height: 550px;
  background-color: black;
  border-radius: 5px;
  font-size: 25px;
  width: 200px;
}

#listSongs p {
  margin-top: 5px;
  width: 200px;
  text-align: center;
  overflow: hidden;
  height: 35px;
  line-height: 50px;
  color: white;
}

#player {
  color: red;
}

#nav {
  margin-top: 50px;
  height: 550px;
  background-color: black;
  border-radius: 20px;
  width: 200px;
}

.hidden {
  margin-top: 50px;
  height: 550px;
  background-color: black;
  border-radius: 20px;
  width: 200px;
  visibility: hidden;
}

#nav p {
  text-align: center;
}

#nav ul {
  list-style-type: none;
  text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div id="listSongs">
    <p>Authors:</p>
    <div class="after"></div>
  </div>
  <div id="player">
    <p>something</p>
  </div>
  <div id="nav">
    <p>something</p>
  </div>
</section>

29 thoughts on “How can I stop my center div from changing position after I SlideUp another divs?”

  1. Pingback: hydroxychloroquine for arthritis reviews
  18. Pingback: hydroxychloroquine sulfate oval pill
  20. Pingback: hydroxychloroquine on ebay 50ml

  23. What i don’t understood is in reality how you’re no longer actually a lot more well-appreciated than you might be right now.
    You are so intelligent. You know therefore considerably when it comes to this matter,
    made me individually imagine it from a lot of numerous angles.
    Its like women and men aren’t interested except it is one
    thing to do with Lady gaga! Your personal stuffs outstanding.

    All the time deal with it up! http://hydroxychloroquined.online/

    Reply

Leave a Comment