javascript - Script for slide/toggle menu?

Question

Don't know if it is okay to ask this type of question, if, then just delete it.

But I'm currently looking for some kind of slide/toggle menu. I have been searching on Google, but I can't seem to find anything to be honest. I'm more of a HTML/CSS guy, so I can't write the code myself, being jQuery or something else. That's why I'm looking for a script of some sort I can use.

I've attached an image that shows what I want it to do.

Left side you see a little box in the top right, and when I click that, I want it to expand down and stay like that until I click the button again. And if there is an up/down arrow that changes depending on how the state is, that wouldn't hurt.

So anyone who might be able to point to a script that might be able to do that ? :)

Thanks in advance.

Answer 1

Maybe something like this?

HTML:

<div id="header">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Boo</li>
        <li>Far</li>
    </ul>
    <div id="toggledWrapper">
        <p id="toggled">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div id="toggler">Toggle</div>
    </div>
</div>

JavaScript (using jQuery):

$(document).ready(function() {
    $("#toggled").hide();

    $("#toggler").click(function () {
        $("#toggled").slideToggle();
    });
});

jsFiddle live demo: http://jsfiddle.net/JTcRE/4/