Fill and change the contents of the div with the selected <li>

Question

I tried to do this and found some results in SO. However, the point of discussion is not the same as mine.

Before anyone can accept my question, I want to first make clear what I really want to get from here. Well:

• If this is a good way for me to achieve what I need, with what I have now (codes), what should I change from there.

• If this is not a good way, “how” should I change and achieve this.

---

Oke

---

Scenario:

I have at least five <li>menus in <ul>. Each <li>has several hidden divs, so it <li>will only display the title of this <li>, but not display the main content or hidden divs.

And then I have an empty div that I want it to be automatically filled with the main content, which is hidden from the first <li> .

After that , if you click the second <li>, etc., the empty div that was filled with the main contents of the first <li>will be changed according to the next selected or next click <li>.

This script that I used is here, but it does not work.

$('#zen-content').html($('#choice').val()); 
     $('#choice').change(function(event) {
         $('#zen-content').html('' + $('#choice').li()+ '');
}); 

And here is my html:

    <ul id="choice">
        <li> fisrt choice <div>hidden div that is going to show in blank div</div></li>
        <li> second choice <div>hidden div...</div> </li>
        <li> third choice <div>hidden div...</div </li>
        <li> last choice <div>hidden div...</div </li>
    </ul>   



    <div id="zen-content">blank div</div>

Answer 1

Try

$(document).ready(function(){
    $('#zen-content').html($('#choice li:first').html()); 
    $('#choice li').click(function(event) {
        $('#zen-content').html( $(this).html());
    }); 
});

:

http://jsfiddle.net/48Qp4/

Answer 2

Click (, ).

$('#choice li').on("click", function () {
    $('#zen-content').html('' + $(this).html() + '');
});

Answer 3

You need to select the div inside the click li element. Example: http://jsfiddle.net/8TURA/ HTML

<ul id="choice">
    <li>
        Option 1
        <div>option 1 hidden div content</div>
    </li>
    <li>
        Option 2
        <div>option 2 hidden div content</div>
    </li>
    <li>
        Option 3
        <div>option 3 hidden div content</div>
    </li>
    <li>
        Option 4
        <div>option 4 hidden div content</div>
    </li>
    <li>
        Option 5
        <div>option 5 hidden div content</div>
    </li>
</ul>    

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

CSS

#choice div
{
    display:none;
}

JQuery

$('#choice li').click(
    function()
    {
        $('#zen-content').html($(this).find('div').html());
    }
);