Thursday, June 14, 2012

Simple-expand: simple jQuery plug-in to expand/collapse elements

Simple-expand, as its name implies, the simplest collapse/expand solution I could think of. It works out of the box without any configuration. All you need is:
<a class="expander" href="#">click me</a>
<div class="content">
    content to show/hide.
</div>
And one line of javascript:
$('.expander').simpleexpand();
View Demos

11 comments:

  1. Replies
    1. Hi, what do you mean? Are you saying the paragraphs don't expand in the demo page? I tried them and they work. Can you give me more details?

      Delete
  2. Hey this works great for me. But is there also a way to have it exanded by default and collapsed on click? Thanks!

    ReplyDelete
    Replies
    1. You can load the plug-in and trigger the click:

      $('.expander').simpleexpand();
      $('.expander').click();

      but you will see the expand animation.

      It would be simple to add an option to support that. Please log an issue on the project's github issues list and I'll implement it.

      Delete
  3. Im not sure if you have developed coding, but Im looking for a Menu that has a submenu and when you click on the submenu, then a description will open up. All the menus have submenus and all the submenus have a description. Thanks in advance for your help.

    example:
    Menu1
    Menu2
    ------SubmenuA
    ---------Description
    ------SubmenuB
    Menu3


    ReplyDelete
    Replies
    1. Hi, I think what you are trying to accomplish is possible with the plug-in. But I don't understand your question. Can you rephrase?

      Delete
  4. What link should i put in the href=''#'' ?

    ReplyDelete
    Replies
    1. None, the '#' is enough. It's just to trick the browser into thinking that the link is valid.

      Delete
  5. Great one! thanks for sharing, very simple once I found the rest of the javascript code for the function.

    ReplyDelete
  6. I have several sections on my page that need to expand or collapse when they are clicked. The plugin expands or collapses on ALL sections AT THE SAME TIME, meaning when one section is clicked, other sections also expand or collapse. What do I have to do to make it work on one section at a time. Thank you.

    ReplyDelete
  7. I get an error
    "VM8004:130 Uncaught TypeError: $ is not a function
    at VM8004:130"

    $(function () {
    console.log("firing");
    $('.expander').simpleexpand();
    $('.expander').click();
    });

    ReplyDelete