"div data role" über item ein/ausblenden??

[Max2612]

Hallo!

Gibt's eine Möglichkeit, das 2. "div data-role" (hier im Beispiel Menü 2)
erst anzuzeigen, wenn ein bestimmtes item einen Bestimmten Wert hat?

<div class="block" style="width:100%">
        <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">

            <div data-role="collapsible" data-collapsed="false">
                <h3>IMenü1 </h3>
                .....
            </div>

            <div data-role="collapsible" data-collapsed="true">
                <h3> Menü2 </h3> 
                ......
            </div>

Gruß,
Max

[smai]

  status.collapse 

[Max2612]

  status.collapse 

Das kannte ich noch gar nicht. Genial...
Manchmal kann's so einfach sein.


Danke!!

[Max2612]

Eine Frage an die HTML Experten.

Ich habe folgenden HTML Code:

<div class="block" style="width:100%">
        <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
                
            <div data-role="collapsible" data-collapsed="false">
                <h3>Inhalt 1</h3>
                
                blablabla
            </div>

            
            <div data-role="collapsible" data-collapsed="true">
                <h3>Inhalt 2</h3>
                
                blablabla    
            </div>

            
            <div data-role="collapsible" data-collapsed="true">
                <h3>Inhalt 3</h3>
                
                blablabla
            </div>
        
        </div>
    </div>

So weit, so gut.
Jetzt hätte ich gerne, dass Inhalt 2 nur sichtbar ist, wenn z.B. Freigabe2 = True,
und Inhalt 3 nur sichtbar ist, wenn Freigabe3 = True.

Mit status.collapse bekomm ich das irgendwie nicht hin.
Inhalt 2 und 3 sind zwar nur dann sichtbar, wenn sie auch sichtbar sein sollen,
aber die "Akkordeon- Funktion" geht dann nicht mehr. (Ich meine, wenn Inhalt 2 geöffnet wird, bleibt auch Inhalt 1 offen)

So mein Versuch:

<div class="block" style="width:100%">
        <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
                
            <div data-role="collapsible" data-collapsed="false">
                <h3>Inhalt 1</h3>
                
                blablabla
            </div>

            
            [COLOR=#FF8C00]{{ status.collapse('Freigabe2', 'Freigabe2') }}
                <div class="hide" data-bind="Freigabe2">[/COLOR]
                    <div data-role="collapsible" data-collapsed="true">
                        <h3>Inhalt 2</h3>
                
                        blablabla    
                    </div>
                [COLOR=#FF8C00]</div>[/COLOR]
            

            [COLOR=#FF8C00]{{ status.collapse('Freigabe3', 'Freigabe3') }}
                <div class="hide" data-bind="Freigabe3">[/COLOR]
                    <div data-role="collapsible" data-collapsed="true">
                        <h3>Inhalt 3</h3>
                
                        blablabla
                    </div>
                [COLOR=#FF8C00]</div>[/COLOR]
        
        </div>
    </div>

Ich hoffe, ihr versteht was ich meine...
Wenn ja, lässt sich das Gewünschte irgendwie umsetzen?

Danke

Gruß, Max

[smai]

Das Problem ist, dass du um die einzelnen collapsibles ein zusätzliches <div> machst, damit zerstörst du die Struktur des collapsible sets.
Versuch mal, das data-bind direkt auf dem div mit dem collapsible anzugeben.
Ganz aufgehen wird es optisch aber wohl trotzdem nicht, weil das letzte collapsible von jQuery Mobile eine andere Klasse kriegt fpr die abgerundeten Ecken unten.

[Max2612]

So geht´s leider nicht.

<div class="block" style="width:100%">
        <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
                
            <div data-role="collapsible" data-collapsed="false" class="ui-btn-active ui-state-persist">
                <h3>Inhalt 1</h3>
                
                blablabla
            </div>

            
            {{ status.collapse('Freigabe2', 'Freigabe2') }}
                <div data-role="collapsible" data-collapsed="true" class="hide" data-bind="Freigabe2">
                    <h3>Inhalt 2</h3>
                
                    blablabla    
                </div>
                
            

            {{ status.collapse('Freigabe3', 'Freigabe3') }}
                <div data-role="collapsible" data-collapsed="true" class="hide" data-bind="Freigabe3">
                    <h3>Inhalt 3</h3>
                
                    blablabla
                </div>
                
        
        </div>
    </div>

So öffnet Inhalt 2 und 3 überhaupt nicht mehr.

Mir würde eigentlich reichen, dass immer Inhalt 1 beim Laden der Seite offen ist, und die anderen 2 geschlossen sind.
Z.B:

1. --- Ich öffne Inhalt 3. Inhalt 1 und 2 sind geschlossen.
2. --- Ich wechsle auf eine andere page
3. --- Wechsle ich wieder zurück, ist immer noch Inhalt 3 geöffnet.

Wenn aber jetzt Inhalt 1 geöffnet wäre, wäre das Problem gelöst.

Vielleicht geht das ja einfacher, als über status.collapse !?