CODEWITHSUNDEEP
jqueryhtml
Alnedru
Alnedru

Reputation: 2655

JQuery show hidden content to a particular div on click on li element

I have some question regarding showing hidden content in a particular place regarding the context.

So I have here this layout:

<div class="col-md-12">
    <div style="display:table; margin:auto; width:470px; height:470px; border:1px dashed;">
        <br />
        <div id="ShowPhotoContext" style="margin:auto;">
         Here should come hidden content from li element
        </div>
    </div>

    <br />

    <div id="slider1" style="margin:auto;">
        <div class="thumbelina-but horiz left">&#706;</div>
            <ul class="menu">
                <li> Click me                                        
                    <div class="caption" id="comment_id1" style="display:none;">
                        <p>Some comments to display</p>
                        <div class="btn-group">
                            <ul class="dropdown-menu" role="menu">
                                <li> First menu </li>
                                <li> Second menu </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        <div class="thumbelina-but horiz right">&#707;</div>
    </div>
</div>

So I have here a list of menu "Click me" when you click on this li element, the hidden content in li, caption should be made visible in the ShowPhotoContext div above.

How can I do that with JQuery?

Upvotes: 1

Views: 1221

Answers (3)

timo
timo

Reputation: 2169

$("li").click(function(){
    $("#ShowPhotoContext").html($(this).find(".caption").show());        
});

Could you try that?

To duplicate your content to the new div try this:

$("li").click(function(){
    $("#ShowPhotoContext").html($(this).find(".caption").show().clone());  
    $(this).find(".caption").hide();
});

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

Use:

 $(document).on('click','.menu>li',function(){
   $('#ShowPhotoContext').html($(this).find('div.caption').show())
 });

Working Fiddle

Upvotes: 3

LarsEngeln
LarsEngeln

Reputation: 288

<menu> <!-- make your structure context-sensitive -->
    <ul>
        <li> Click me                                        
            <div class="caption" id="comment_id1" style="display:none;">
            <!-- ... -->

js:

var element = $("menu > ul > li:nth-of-type(1)"); // getting the first li in ul in menu
element.on("click", function() { // bind the click-event
    $("#ShowPhotoContext").html($(this).find("#comment_id1"));  // add hidden content to showPhotoContext
    $("#ShowPhotoContext").show(); // and finally display
});

Upvotes: 0

Related Questions