CODEWITHSUNDEEP
jqueryhtmlcss
Phoebe19
Phoebe19

Reputation: 163

toggle not holding active

I have two slider menus, left and right, and only right is holding the active value when it is clicked. Left menu only slides out when the toggle button is held down, and i need to it slide when the toggle is clicked not just held down.

$('.leftToggle').on('click', function(e) {
  $(".sidebarleft").toggleClass("sidebarleftactive");
});
/*sidebar left*/

.sidebarleft {
  position: absolute;
  padding-top: 0px;
  left: auto;
  top: 7vw;
  height: 80%;
  right: 25%;
  width: calc(50% + 20px);
  background-color: #2E3192;
  border-color: #2E3192;
  border-style: solid;
  border-width: 5px;
  padding-right: 20px;
  padding-left: 5px;
  -webkit-transition: all 1s;
}
.sidebarleft:active {
  right: 70%;
  width: 25%;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarleft" id="sideleft">
  <div class="lefttext">
    <div class="leftTitle">title</div>

    <div class="leftToggle">+</div>

    <div class="leftSubHead">subheading</div>

    <div class="leftInformation">
      <br />

      <div>
        <br>text
        <br />
        <form></form>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 49

Answers (1)

lmgonzalves
lmgonzalves

Reputation: 6588

Fix your CSS:

.sidebarleft:active {

To be:

.sidebarleftactive {

FIDDLE: https://jsfiddle.net/lmgonzalves/npgug376/

Upvotes: 2

Related Questions