jQuery Show/Hide Aufklappen/Zuklappen mit mehreren verschachtelten div's

Question

Ich möchte dies anzuzeigen:

<div class="column mcb-column one-fourth column_column column-margin-"> 
<div class="column_attr clearfix align_right"> 
<h1 class="passos-metodologia">1</h1> 
</div></div> 

<div class="column mcb-column three-fourth column_column column-margin-"> 
<div class="column_attr clearfix align_left box"> 
<h2 class="box-heading">BOX TITLE</h2> 
<p class="box-text">TEXT</p> 
</div></div> 

Und dann einen Umschaltknopf/link haben Aufklappen/Zuklappen dies:

<div class="more-first" style="width: 100%;"> 
<div class="column mcb-column one-fourth column_column column-margin-"> 
<div class="column_attr clearfix align_right"> 
<h1 class="passos-metodologia">2</h1> 
</div></div> 

<div class="column mcb-column three-fourth column_column column-margin-"> 
<div class="column_attr clearfix align_left"> 
<h2 class="box-heading">BOX TITLE</h2> 
<p class="box-text">TEXT</p> 
</div></div> 

<div class="column mcb-column one-fourth column_column column-margin-"> 
<div class="column_attr clearfix align_right"> 
<h1 class="passos-metodologia">3</h1> 
</div></div> 

<div class="column mcb-column three-fourth column_column column-margin-"> 
<div class="column_attr clearfix align_left"> 
<h2 class="box-heading">BOX TITLE</h2> 
<p class="box-text">TEXT</p> 
</div></div> 

und die CSS, falls es hilft:

.column { 
    float: left; 
    margin: 0 1% 40px; 
} 

.column-margin- .column { 
    margin-bottom: 10px !important; 
} 
.column_attr.align_right { 
    text-align: right; 
} 
.column_attr.align_left { 
    text-align: left; 
} 
.one-fourth.column { 
    width: 23%; 
} 
.three-fourth.column { 
    width: 73%; 
} 
.passos-metodologia { 
    color: white; 
    margin-top: .4em; 
    font-size: 10em; 
} 
.box { 
    background: #353535; 
    padding: 0 5%; 
    max-width: 42em; 
    margin-left: 1.8em; 
} 
.box-heading { 
    color: white; 
    text-align: right; 
    margin-top: 1em; 
} 
.box-text { 
    color: white; 
    text-align: justify; 
} 

Ive kam über viele jQuery Demos, aber sie alle halten den Schalter über dem erweitern ed Inhalte.

Wie Sie in der HTML sehen können, ist dies keine Liste, aber die Ausgabe sieht wie eine aus. Also, ich möchte die Liste nicht "brechen", indem ich eine Umschalttaste zwischen 1 und 2 habe, nachdem der Inhalt erweitert wurde.

Ich brauche den Schalter/Link mit dem Inhalt nach unten zu bewegen, so dass ich dies:

Vor erweitert:

1- Inhalt
(Toggle-Link)

Nach dem Expandieren:

1- Inhalt
2- Inhalt
3- Inhalt
(Toggle-Link)

Zusätzliche Informationen:

ich in ein ähnliches Problem in Bezug auf die Toggle-Position lief, sobald der Inhalt erweitert und dieser Stift hat den Trick: https://codepen.io/maxds/pen/jgeoA/

In dieser Situation war alles, was ich hatte, TEXT! Jetzt habe ich viele div's innerhalb div's.

Das Skript, das oben auf dem Stift gefunden wurde, wird nicht mehr angewendet, da es basierend auf der Anzahl der Zeichen, die es anzeigen soll, ausgelöst wird, bevor es den Toggle-Link anzeigt.

Wie kann ich genau übersetzen, was dieser Stift tut, wenn ich versuche, mehrere verschachtelte Divs zu erweitern/zu reduzieren?

Answer 1

Fügen Sie einfach den Inhalt ein, den Sie in einem div anzeigen/ausblenden möchten, aber schließen Sie den div über dem letzten Teil, den Sie "verschieben" möchten.

<div class="more-first" style="width: 100%;"> 
    <div class="column mcb-column one-fourth column_column column-margin-"> 
    <div class="column_attr clearfix align_right"> 
    <h1 class="passos-metodologia">2</h1> 
    </div></div> 

    <div id="hideMe" style="display:none"> 

    <div class="column mcb-column three-fourth column_column column-margin-"> 
    <div class="column_attr clearfix align_left"> 
    <h2 class="box-heading">BOX TITLE</h2> 
    <p class="box-text">TEXT</p> 
    </div></div> 

    <div class="column mcb-column one-fourth column_column column-margin-"> 
    <div class="column_attr clearfix align_right"> 
    <h1 class="passos-metodologia">3</h1> 
    </div></div> 
    </div> <!-- close the div of hidden content --> 

    <!-- this content will slide down when the above is shown --> 
    <div id="myclickDiv" class="column mcb-column three-fourth column_column column-margin-"> 
    <div class="column_attr clearfix align_left"> 
    <h2 class="box-heading">BOX TITLE</h2> 
    <p class="box-text">TEXT</p> 
    </div></div> 
</div> <!-- close outer div--> 

Dann verwenden Javascript/jQuery es hin- und herzuschalten:

in einigen JS-Datei oder in Script-Tags:

$(document).ready(function() { 
    $("#myclickDiv).click(function() 
    { 
     // use toggle(), or for explicit control: show() and hide() 
     $("#hideMe").toggle(400); //animate and show/hide it 
    }); 
});