使用jQuery切换div的问题

Question

I have got a hidden area that shows when a red sidebar is clicked. I want it to hide when I click the red sidebar again.

I have put a blue bar inside the hidden area that hides the collapsible area when clicked. I want the red bar to do both things, hide and show the collapsible area.

HTML :

<div class="frame">
    <div id="menu" class="menu nav-collapse collapse width aux">
        <div class="collapse-inner">
            <div id="left-collapser"></div>
        </div>
    </div>
    <div class="view aux2">
        <div id="right-collapser" data-toggle="collapse" data-target="#menu"></div>
    </div>
</div>

CSS

#left-collapser {
    width: 20px;
    height: 100%;
    float: right;
    background-color: lightblue;
}
#right-collapser {
    width: 20px;
    height: 100%;
    float: left;
    background-color: red;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

}

.aux {
    border: 1px solid red;
    background-color: yellow;
}
.aux2 {
    border: 1px solid blue;
    background-color: lightgreen;
}
 body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  .frame {
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;

    .menu {
      height:100%;
      /* background-color: #3D6AA2; */

      &.collapse {
        float:left;
        height: 100% !important;
        width: auto;
      }

      &.collapse.height {
        position: relative;
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.35s ease;
        -moz-transition: height 0.35s ease;
        -o-transition: height 0.35s ease;
        transition: height 0.35s ease;
      }

      &.collapse.width {
        position: relative;
        width: 0;
        overflow: hidden;
        -webkit-transition: width 0.35s ease;
        -moz-transition: width 0.35s ease;
        -o-transition: width 0.35s ease;
        transition: width 0.35s ease;
      }

      &.collapse.in.width {
        width: auto;
      }

      &.collapse.in.height {
        height: auto;
      }

      .collapse-inner {
        position: relative;        
        width: 250px;
        height: 100%;
      }

    }
    .view {
      width: 50%;
      height: 100%;
      overflow: hidden;

    }
  }
}

Javascript

$("#left-collapser").click(function (e) {
    $('#menu').collapse('hide');
});

$("#right-collapser").click(function (e) {
    $('#menu').collapse('show');
});

Here is the Fiddle

•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• EDIT •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

It turns out Javascript isn't needed at all as the animations are pulled via CSS:

FIDDLE

I thought Javascript was doing the collapse/expand effect but no, CSS only. I got what I intended but since I reused code I found on the net, I would still like to know how exactly is this effect achieved - so I can do it myself instead of looking for something already done.

Answer 1

Try this:

$("#left-collapser").click(function (e) {
    $('#menu').toggle('collapse');
});

FIDDLE

You might not require the blue area.

Answer 2

You have already enabled collapse event/function via data attribute data-toggle="collapse" and a data-target . That s all you needed when you have bootstrap.js` included.

Also you can manually trigger it via javascript like this:

$('#menu').collapse('toggle')

You can read more about this here .

Answer 3

I've updated your Fiddle .

I have changed your JS to

$("#left-collapser").click(function (e) {
    $('#menu').collapse('hide');
});

$("#left-collapser").click(function (e) {
    $('#menu').collapse('show');
});

Now you can show/hide by clicking on the red area.

As mentioned in the other answers, you can get rid of the blue area.

Answer 4

try this fiddle

$("#left-collapser").click(function (e) {
    $('#menu').toggle('collapse');
});