Question

I want to make an expanding sidebar, I was able to make the sidebar expand but but I need to cover the original button that was pressed.

I would like to have an area at the side where I can click to close the sidebar.

I'm almost there. The problem i'm having is that the close id when clicked does not seem to trigger the toggle.

here is my code

try {
            Twitter twitter = new TwitterFactory().getInstance();
            long cursor = -1;
            IDs ids;
            System.out.println("Listing following ids.");
            do {
                if (0 < args.length) {
                    ids = twitter.getFriendsIDs(args[0], cursor);
                } else {
                    ids = twitter.getFriendsIDs(cursor);
                }
                for (long id : ids.getIDs()) {
                    System.out.println(id);
                }
            } while ((cursor = ids.getNextCursor()) != 0);
            System.exit(0);
        } catch (TwitterException te) {
            te.printStackTrace();
            System.out.println("Failed to get friends' ids: " + te.getMessage());
            System.exit(-1);
        }

$("#icon-menu-mobile,#exit").each(function() {
  $(this).click(function() {
    var effect = 'slide';
    var options = 'left';
    var duration = 500;

    $('#panel').toggle(effect, options, duration);
  });
});

#panel {

  position: absolute;

  top: 0px;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.3);

  display: none;

  z-index: 999;

}

.panelcontent {

  position: relative;

  top: 50px;

  width: 70%;

  height: 100%;

  background-color: #cccccc;

  float: left;

}

#icon-menu-mobile {

  width: 36px;

  height: 30px;

  cursor: pointer;

  font-size: 24px;

}

#icon-menu-mobile,

#exit {

  position: static;

  float: right;

  width: 30%;

  height: 100%;

  cursor: pointer;

}

As you can see after clicking the burger menu you can't close it with the side close button.

I'm guessing that the toggle only works from the first id clicked and that id needs to be clicked again to toggle again.

Is there a way to have two id's activate the same toggle?

Answer 1

Here's a working example: http://codepen.io/anon/pen/pgGPrm

I think you were attaching the same event to both, so it wouldn't slide to the opposite direction, i've split it up into:

install_name_tool

EDIT: actually upon further inspection, it doesn't seem to matter if they are together or not. the thing that fixed it was actually including jQuery-UI in my codepen. are you sure you are properly including jQuery-UI? otherwise you get an error after the initial slide, which prevents the second slide from working

How to use the same toggle comment with two different ID/Classes

1 个答案: