Question

How can I easily make my own jQuery accordion? I’d like to avoid wasting time trying to adapt other non-standard jQuery UI accordions.

Answer 1

First: Get the jQuery library

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

Second: Place this in your page

<!-- NOTE: You MUST give a unique id to ALL the menu items -->
<div id="item1" class="menuItem">
    First Item
</div>
<div>text</div>
<div id="item2" class="menuItem">
    Second Item
</div>
<div>text</div>

Third: Put the script wherever you want

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('.menuItem').next().css({ display: 'none' });

        $('.menuItem').click(function (event) {
            if ($('#' + event.target.id).next().css('display') == 'none') {
                collapseAll();
                $('#' + event.target.id).next().slideDown(500);
            }
        });
    });

    function collapseAll() {
        $('.menuItem').next().slideUp(500);
    }
</script>

Bonus: You can place some images with avoiding headaches

<div id="item1" class="menuItem">
    <img src='@Url.Content("~/Content/icon.png")' alt="" />
    <span>First Item</span>
</div>
<div>text</div>
<div id="item2" class="menuItem">
    <img src='@Url.Content("~/Content/icon.png")' alt="" />
    <span>Second Item</span>
</div>
<div>text</div>

For the correct display of the images to the left of the text you will need some css format

.menuItem img { float: left; }
.menuItem span { float: left; }
/* Avoided further styling for simplicity */