How to show the description of the elements that are listed on the sidebar on the body using show & hide javascript or JQuery?

Question

I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.

I came with a solution similar to this ONE

but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.

Therefore, how can I do that?

Answer 1

You can try this way

<div id="menu">
<ul>
    <li id="a">item a
        <div id="contentA" style="display:none">Description of item A</div>
    </li>
    <li id="b">item b
        <div id="contentB" style="display:none">Description of item A</div>
    </li>
</ul>
</div>

<div id="content"></div>

<script type="text/javascrip">
    $(document).ready( function () {
        $('#a').click(function() {
            $('#content').html($('#contentA').html());
        });

        $('#b').click(function() {
            $('#content').html($('#contentB').html());
        });
    });
<script>

Answer 2

I updated your example , it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.

This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).

Answer 3

Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.

http://jsfiddle.net/PajFP/14/ (updated)