Erweitern / reduzieren-div durch klicken auf ein anderes

Ich bin auf der Suche, um erstellen Sie ein div, die erweitert und reduziert werden, wenn eine völlig separate, non-parent-div-element geklickt wird.

Unten ist ein Beispiel für eine Erweiterung und die einstürzung Effekt, den ich mag und habe schon rumgespielt mit. Ich bin nicht sicher, wie man am besten ändern Sie den code unten, so dass ich könnte sagen, klicken Sie auf ein div-Element befindet sich in einer Seitenleiste, und einen anderen div befindet sich unterhalb der Kopfzeile sagen, erweitern/reduzieren, drücken alle Inhalte, die darunter nach unten.

Den Inhalt der aufklappen/Zuklappen div in Frage könnte eine search bar für die Instanz, die können ein-oder ausgeblendet werden, indem der Benutzer durch klicken auf eine Schaltfläche der Seitenleiste.

JS:

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

CSS:

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>I'm putting a search bar here.</li>
            
        </ul>
    </div>
</div>

InformationsquelleAutor Thomas | 2016-02-08

JS:

$(".header").click(function() {
  $('.content').slideToggle().toggleClass('active');
  if ($('.content').hasClass('active')) {
    $('.header span').text('Collapse');
  } else {
    $('.header span').text('Expand');
  }
});
$('button').click(function(){
	$(".header").trigger('click');
})

CSS:

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>I'm putting a search bar here.</li>
            
        </ul>
    </div>
</div>
  <button>another click</button>

Danke, das funktioniert perfekt.
Sie sind willkommen, Bruder, akzeptieren Sie bitte die Antwort, wenn es ist Ihr Problem gelöst 😉

InformationsquelleAutor Krish

JS:

$(".toggle").click(function () {

    
    //getting the content 
    $content = $(".content")
    //open up the content - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

CSS:

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>I'm putting a search bar here.</li>
            
        </ul>
    </div>
<div class="toggle">click me</dov>
</div>

Ist es das, was Sie wollte. Ich Frage nur, weil das ist wirklich grundlegende Sachen
Ja, dass ist es, was ich war, nach. Ich denke, es ist die grundlegende Dinge, aber ich bin ganz neu hier (wenn das nicht schon offensichtlich ist), also danke für die Hilfe.

InformationsquelleAutor user3629023

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.