Manipulate style elements of a Button via jquery: depending on the state of another element

Question

Another question from me. I am actually writing a little HTML/CSS3/jQuery project with the intention to learn more :-).

I could solve all problems by my own except one, that gives my a bad headache now.

Here is it: I want to set a style via jQuery for a button element. On page load set it to display:none.

<div class="header">
    <img id="button" src="img/back_button.jpg"/>
</div>

with the css;

#button{
  padding-top: 10px;
  padding-left: 15px;
  float:left;
  display: none;
}

The button's function is to collapse all accordion I use on click.

$('#button').bind('click',function(){
        $('.accord').collapsible("option","collapsed", true );
    });

So I need to ask for the state of the accordion/collapsible and set the style.display to block, when a accordion is active. Only if the accordion is open i want to see the button. I tried several things like;

var status = $('[data-role=collapsible]).hasClass('ui-collapsible-collapsed')
if(status){
        $('#button').css("display", "block")
    }
    else{console.log("foo")}

or

$("[data-role=collapsible]").on('collapse', $.proxy(function () {
            $('#button').css("display", "block")
        }, this)).on('expand', $.proxy(function () {
            $('#button').css("display", "none")
        }, this));

or

if($('.accord').collapsible("option","collapsed", true )){
        $('#button').show();
    }
    else if($('.accord').collapsible("option","expand", true )){
        $('#button').hide();
}

but somehow I can't get the result I want. Can you guys (& girls) help me out please?

Answer 1

On collapsiblecollapse and collapsibleexpand events, check if any collapsibles are currently open ( $("[data-role=collapsible]").not(".ui-collapsible-collapsed").length > 0 ) and show or hide the button based on this:

$(document).on("pagecreate", "#page1", function(){
    $("#btnCollapse").hide();

    $("#btnCollapse").on("click", function() {
        $('[data-role=collapsible]').collapsible("option","collapsed", true );
    });

    $('[data-role=collapsible]').on("collapsiblecollapse collapsibleexpand", function(){
        if ( $("[data-role=collapsible]").not(".ui-collapsible-collapsed").length > 0){
            $("#btnCollapse").show();   
        } else {
            $("#btnCollapse").hide();
        }
    });
});

DEMO

Answer 2

it now works with this js

define(['jquery', 'jqueryMobile'], function($) {

    if($('.accord').collapsible("option","collapsed", true )){
    $('#button').hide();
}

$('[data-role=collapsible]').on("collapsiblecollapse collapsibleexpand", function(){
        if ( $("[data-role=collapsible]").not(".ui-collapsible-collapsed").length > 0){
            $("#button").show();
            $('#button').bind('click',function(){
                $('.accord').collapsible("option","collapsed", true );
            });
        } else {
            $("#button").hide();
        }
    });
});