Tips for concealing collapsible-header while collapsible-content is visible in Jquery Mobile

Question

Tips for concealing collapsible-header while collapsible-content is visible in Jquery Mobile

I am currently working with Jquery Mobile and utilizing a collapsible set. By default, when I click on h3, the collapsible content is shown. What I am trying to achieve is that when I click on h3 (Animals), the h3 element should disappear and only the ul containing Cats should be visible. Similarly, if I click on the image inside the ul for Cats panel, it should be hidden and the header-h3 should reappear. This functionality needs to be applied across a large dataset.

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>

javascript jquery css jquery-mobile

Answer 1

Answer №1

One way to hide the h3 element using CSS and then show it again along with hiding the child ul when a specific image is clicked is by utilizing jQuery click handlers. Here's an 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();
    });
});

Check out the updated jsFiddle, which was forked from your original one: http://jsfiddle.net/dBH3h/

The first click handler targets the

div[data-role="collapsible"] > h3

to handle the hiding of the h3 element when expanding it. The IF condition within this handler sets up the next action.

By adding a click event listener to the ul[data-role="listview"] img, we are able to use basic DOM traversal in jQuery to locate the corresponding h3, trigger its click event (which automatically hides the ul and shows the expand icon), and then display it again.

UPDATE: It's important to note that this method may lead to unexpected outcomes with this specific collapsible widget as it does not support multiple open panels simultaneously. For widgets where this limitation doesn't apply, this solution should work fine - however, for this widget, consider exploring Omar's alternative answer.

Answer 2

One way to hide the h3 element using CSS and then show it again along with hiding the child ul when a specific image is clicked is by utilizing jQuery click handlers. Here's an 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();
    });
});

Check out the updated jsFiddle, which was forked from your original one: http://jsfiddle.net/dBH3h/

The first click handler targets the

div[data-role="collapsible"] > h3

to handle the hiding of the h3 element when expanding it. The IF condition within this handler sets up the next action.

By adding a click event listener to the ul[data-role="listview"] img, we are able to use basic DOM traversal in jQuery to locate the corresponding h3, trigger its click event (which automatically hides the ul and shows the expand icon), and then display it again.

UPDATE: It's important to note that this method may lead to unexpected outcomes with this specific collapsible widget as it does not support multiple open panels simultaneously. For widgets where this limitation doesn't apply, this solution should work fine - however, for this widget, consider exploring Omar's alternative answer.

Answer 3

Answer №2

When the `collapsibleexpand` event is triggered, we can hide the header by adding the `ui-screen-hidden` class. To display the header again, an event needs to be bound to the collapsible's content. For example, a `click` event can be used to show the header again and programmatically collapse the content using `.collapsible("collapse")`.

$(document).on("collapsibleexpand", "[data-role=collapsibleset]", function (e) {
   // Show previously hidden headers
   $(".ui-screen-hidden").removeClass("ui-screen-hidden");
   // Hide the target collapsible's header
   $("h3", e.target).addClass("ui-screen-hidden");
   // Listen for 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 the target collapsible 
   collapsible.collapsible("collapse");
});

Check out the demo here

Answer 4

When the `collapsibleexpand` event is triggered, we can hide the header by adding the `ui-screen-hidden` class. To display the header again, an event needs to be bound to the collapsible's content. For example, a `click` event can be used to show the header again and programmatically collapse the content using `.collapsible("collapse")`.

$(document).on("collapsibleexpand", "[data-role=collapsibleset]", function (e) {
   // Show previously hidden headers
   $(".ui-screen-hidden").removeClass("ui-screen-hidden");
   // Hide the target collapsible's header
   $("h3", e.target).addClass("ui-screen-hidden");
   // Listen for 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 the target collapsible 
   collapsible.collapsible("collapse");
});

Check out the demo here

Answer 5

Answer №3

To achieve the desired effect, you can simply include the following CSS:

.custom-collapsible h3 {
    display: none;
}

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

Additionally, add the below JS function:

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

You can test this functionality by visiting this fiddle.

Answer 6

To achieve the desired effect, you can simply include the following CSS:

.custom-collapsible h3 {
    display: none;
}

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

Additionally, add the below JS function:

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

You can test this functionality by visiting this fiddle.

Tips for concealing collapsible-header while collapsible-content is visible in Jquery Mobile

Answer №1

Answer №2

Answer №3

Similar questions

The lack of synchronization between the updated state in one function and its counterpart is causing discrepancies, resulting in the incorrect information being sent to the API

Why is T r showing an error when l c.fireWith $.AJAX.error?

Is there a way to incorporate text fields and input in BootstrapDialog?

The Three.js scene is failing to render properly on subsequent attempts

Is there a way to automatically populate the result input field with the dynamic calculation results from a dynamic calculator in Angular6?

What is causing the child table (toggle-table) to duplicate every time a row in the parent table is clicked?

jQuery - Generating numerous instances

Text pushing upper div caused by height increase of inner input in grid column due to excessive text length

Developing pagination functionality in ReactJS

Repairing a syntax error in a jQuery selector variable

Linking information within a three-dimensional mesh structure in the context of a city created through procedural generation

Different Ways Split Button Format Can Vary Based on Web Browser

Tips on how to loop a song continuously in jPlayer's circular mode

PHP code to create a bottom border in echo statement

Show Pop in relation to modified Text

The difference between using document.getElementsByTagName("img") and document.getElementById('testimg')

Having trouble with implementing the mottie jQuery keyboard on a popup box?

javascript identify dissimilarities within arrays

Ensuring a height of 100% with the utilization of two divs positioned using float left and right, along with

Utilizing the information from a file as the data for an object