jQuery einfaches zusammenklappbares Div?

Question 1

Ich suche nach dem richtigen, einfachen, kleinen Code, um die folgenden Dinge zu tun:

Klicken Sie auf Element mit darauf angewendeter Klasse.

DIV.CLASS – Das erweitert und zeigt versteckte Inhalte. (slideDown – Toggle)
DIV.CLASS – Blendet den zuvor angezeigten Inhalt ein und blendet ihn aus. (slideUp – Umschalten)

Ich habe hier eine jsFiddle erstellt: http://jsfiddle.net/Q4PUw/1/

Um vage und einfach zu sein, muss ich wissen, wie man eine DIV-KLASSE dazu bringt, ausgeblendet und sichtbar zu werden, sobald auf ein Element auf derselben Seite eine KLASSE angewendet wird, in der der HIDDEN- und/oder VISIBLE-HTML-Inhalt aktiviert und deaktiviert wird. Und ich brauche es standardmäßig ausgeblendet.

Ich habe das ganze Internet durchsucht und nur sehr komplexe Skripte gefunden, aber nichts Einfaches. Ich habe einfache Akkordeons gefunden … Aber diese schließen nie, sie öffnen nur ein anderes.

Ich danke Ihnen allen für die Hilfe und hoffe, dass ich in der Lage sein kann, dieselbe Frage für viele andere Menschen zu beantworten …

Hinweis: Ich kenne sehr wenig JavaScript und oder sogar jQuery.

Question 2

$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});

Demo: http://jsfiddle.net/Q4PUw/2/

Question 3

Ich sah mir das an und wollte ein zusammenklappbares Div, das bereits für mich gestylt war. Dann wurde mir klar, was ich wollte, war ein Single-Pane-Jquery-UI-Akkordeon.

<div id="collapse">
   <h3>Collapse and Expand</h3>
   <div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
    collapsible: true,
    active: false
});
</script>

http://jsfiddle.net/MB4ch/1/

Question 4

Ich wollte dies mit mehreren Divs machen, jedes mit seinem eigenen Trigger. Aufbauend auf der obigen Antwort von AlienWebguy:

HTML

<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

Javascript

$('.expand').click(function(){
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
});

CSS

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

https://jsfiddle.net/Q4PUw/3767/

Question 5

Schlechte Idee, Akkordeon zu verwenden. Besser ist es, einen eigenen zusammenklappbaren Block zu erstellen.

Beispiel:

function InitSpoilBlock(idClicked)
    {
        $(idClicked).on('click', function(e){
            var textArray = ['blind','slide'];//here you can add other effects

            var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];

            $(e.target).parent().children(".HiderPanel").toggle(randomEffect);
        });
    }

also wenn du so html schreibst:

<div class="HiderContainer">
    <a href="#" class="Hider">More</a>
    <div class="HiderPanel">
        Spoiled block of html
    </div>
</div>

und nach seitenladen wirst du anrufen

InitSpoilBlock('.Hider');

Alle Blöcke können mit zufälligen Animationen zusammengeklappt und versteckt werden. Oder Sie können auch eine exakte Animation verwenden.