CODEWITHSUNDEEP
javascriptjqueryhtmlcss
inandout
inandout

Reputation: 93

fill and change the content of div with the chosen <li>

I have tried to google it and found some results in SO. However the point in the discussion is not same as mine.

Before anyone can accept my question, I want to make it clear first what I really want to get from here. As follows;

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

  2. If this is not the good way, 'by what way' should I change and achieve it.

Oke

The scenario is:

I have at least five <li> menus in a <ul>. In each <li>, there are some hidden divs so that the <li> will only show the title of that <li> but not showing up the main content or the hidden divs.

And then, I have a blank div that I want it to automatically be filled by the main content that is being hidden from the first <li>.

After that, if the second <li> and so on is clicked, the blank div that has been filled by the main content of the first <li> will be changed according to the next chosen or the next clicked <li>.

This script that I have been using is here, but it doesnt 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>

Upvotes: 4

Views: 346

Answers (3)

jtorrescr
jtorrescr

Reputation: 627

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());
    }
);

Upvotes: 1

PrashantJ
PrashantJ

Reputation: 457

Try

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

Fiddle:

http://jsfiddle.net/48Qp4/

Upvotes: 1

Juan
Juan

Reputation: 5050

use the Click event instead of change(btw you have a typo).

demo

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

Upvotes: 1

Related Questions