• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Symbol austauschen

D

danield

New member
Hallo,

in einem Script verwende ich jquery-1.11.0.min.js und bootstrap.min.js (Version 3).

Ich möchte das Symbol vor dem Text austauschen, je nachdem, ob der Tab geschlossen, oder geöffnet ist.
Mit meinem Script klappt das allerdings nicht.
Ich bin leider noch keine Leuchte in JavaScript, daher würde ich mich um Hilfe freuen.

PHP: 
$(document).ready(function(){
$('div.panel-collapse').on('shown', function () {
    $(this).parent("div").find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");

});

$('div.panel-collapse').on('hidden', function () {
    $(this).parent("div").find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
}

PHP: 
<div class="container-fluid">
	<div class="row-fluid">
		<div class="col-md-12">

		<div class="panel-group" id="accordion">
		
		  <div class="panel panel-default">
		    <div class="panel-heading">
		      <h4 class="panel-title">
		        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
					<i class="glyphicon glyphicon-chevron-up"></i>
		          Collapsible Group Item #1 
		          
		        </a>
		      </h4>
		    </div>
		    <div id="collapseOne" class="panel-collapse collapse in">
		      <div class="panel-body">
		        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
		      </div>
		    </div>
		  </div>
  
		  <div class="panel panel-default">
		    <div class="panel-heading">
		      <h4 class="panel-title">
		        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
		        	<i class="glyphicon glyphicon-chevron-down"></i>
		          Collapsible Group Item #2
		        </a>
		      </h4>
		    </div>
		    <div id="collapseTwo" class="panel-collapse collapse">
		      <div class="panel-body">
		        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
		      </div>
		    </div>
		  </div>
		  
		  <div class="panel panel-default">
		    <div class="panel-heading">
		      <h4 class="panel-title">
		        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
		        <i class="glyphicon glyphicon-chevron-down"></i>
		          Collapsible Group Item #3
		        </a>
		      </h4>
		    </div>
		    <div id="collapseThree" class="panel-collapse collapse">
		      <div class="panel-body">
		        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
		      </div>
		    </div>
		  </div>
		</div>

		</div>
	</div>
</div>
 
Ich habe ein bootstrap tab.

Wenn der Tab offen ist, soll das eine Symbol kommen, und wenn es geschlossen wird, soll das Symbol gegen ein anderes Symbol ausgetauscht werden.
 
Sorry, anscheinend habe ich mich nicht richtig ausgedrückt.

Ich möchte in <div class="panel-group" id="accordion">

je nachdem, ob <div class="panel-body"> angezeigt wird, oder nicht,

<i class="glyphicon glyphicon-chevron-down"></i>

gegen

<i class="glyphicon glyphicon-chevron-up"></i>

tauschen.
 
danield schrieb:
Sorry, anscheinend habe ich mich nicht richtig ausgedrückt.
Zum Vergrößern anklicken....
doch, hast du eigentlich schon, denke ich
du hast ein bootstrap tab und willst, wenn ein anderes tab aktiviert wird irgendwelche klassen tauschen
un du hast es mit .on('shown' versucht, bootstrap triggert allerdings kein event shown/hidden sondern shown.bs.tab
 
Sorry, ich verstehe nichts...
Wie auch immer. Ist ein Bereich geöffnet, so soll der Pfeil nach oben angezeigt werden. Ist der Bereich geschlossen, so soll der Pfeil nach unten angezeigt werden.
 
Ich denke, der einfachere Weg wäre, das komplett über das CSS zu machen. Beim Tab hat der aktive Tab die CSS-Klasse "active". Das könnte man ausnutzen.
Beim Accordeon ist das etwas komplizierter, da der Darstellungs-DIV die Klasse "in" bekommt, aber das kann man sicher auch irgendwie deichseln.

Aber auch mir ist nicht ganz klar, wo das Problem genau liegt und was denn jetzt genau verwendet wird...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben