How to hide collapsible-header when collapsible-content is displayed in Jquery Mobile?

Question

I am working on Jquery Mobile and I am using collapsible set. When I click h3, then collapsible-content is diplayed. this is pre defined. But what I need is, When I click h3(Animals), then h3 should be hidden and only ul should be diplayed(Cats). Likewise if I click on the image inside ul(Cats panel), this should be hidden and header-h3 should be displayed. I have a large set of data in this way and want to apply to the entire set.

JSFIDDLE

//html
    <div id="list" data-role="collapsibleset" data-inset="false">
        <div data-role="collapsible">
            <h3>Animals</h3>
            <ul data-role="listview" data-inset="false">
                <li><span><img id="image" src="http://lorempixel.com/20/20/"></span>Cats</li>          
            </ul>
        </div>

Answer 1

As @falsarella notes, you can achieve the hiding of the h3 through CSS, but restoring it and hiding the child ul when clicking the image will require some jQuery click handlers. Example:

$(function () {
    $('div[data-role="collapsible"] > h3').click(function() {
        if(!$(this).is(':hidden'))
            $(this).hide();
    });
    $('ul[data-role="listview"] img').click(function() {
        $(this).closest('div[data-role="collapsible"]').children('h3').trigger('click').show();
    });
});

Updated jsFiddle, forked from yours: http://jsfiddle.net/dBH3h/

The click handler on the div[data-role="collapsible"] > h3 handles the work of hiding the h3 upon expanding it; the IF condition therein is then leveraged by the next handler.

By attaching to the click event for your ul[data-role="listview"] img , we can then use some basic DOM traversal in jQ to find the associated h3 , trigger its clink event (which automatically hides the ul and restores the expand icon) and then make it visible again.

UPDATE: Because this particular collapsible widget does not support having multiple panels open at once, this answer can cause unexpected results (ie multiple hidden headers) when attempting to expand a new one before collapsing the previous one. For widgets where that's not the case, this would work - for this widget, look to Omar's answer.

Answer 2

Listen to collapsibleexpand event and then hide header by adding ui-screen-hidden class. To show the header again, you need to bind an event to collapsible's content. Eg A click event will show header again and collapse content programmatically .collapsible("collapse") .

$(document).on("collapsibleexpand", "[data-role=collapsibleset]", function (e) {
   // show previously hidden headers
   $(".ui-screen-hidden").removeClass("ui-screen-hidden");
   // hide target collapsible's header
   $("h3", e.target).addClass("ui-screen-hidden");
   // listen to click event on collapsible's content
}).on("click", ".ui-collapsible-content", function () {
   // retrieve parent collapsible 
   var collapsible = $(this).closest(".ui-collapsible");
   // show header
   collapsible.find(".ui-screen-hidden").removeClass("ui-screen-hidden");
   // collapse target collapsible 
   collapsible.collapsible("collapse");
});

Demo

Answer 3

Just add the following CSS :

.ui-collapsible h3 {
    display: none;
}

.ui-collapsible.ui-collapsible-collapsed h3 {
    display: block;
}

And the following JS :

$(".ui-collapsible-content").click(function(){
    $(this).parent().collapsible("collapse");
});

Here is a fiddle so you can verify whether it is the desired behavior or not.