2016-07-26 4 views
0

Ich habe folgenden Code, der den Container anzeigt, sobald die Seite neu geladen wird. Ich möchte, dass der Container nach dem Klicken auf den Tag <a> sichtbar ist.jquery Akkordeon sollte den Inhalt nach dem Klicken auf Header div anzeigen

Wenn der Container beispielsweise "Hallo Welt" enthält, sollte dieser Text nach dem Klicken auf den Link angezeigt werden und das Symbol sollte sich in ein Pluszeichen ändern.

<html> 
<head> 
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
</head> 

<body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 

    <div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus"></i>Antipasti</a> 
      </h4> 
     </div> 
    <div id="panel1" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
      hello world!!! 
       </div> 
      </div> 
     </div> 
    </div> 


    <script type="text/javascript"> 
    var selectIds =$('#panel1'); 
    $(function ($) { 


     selectIds.on('hidden.bs.collapse show.bs.collapse', function() { 
      $(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus'); 
    }) 
    }); 

    </script> 
</body> 
</html> 

Antwort

2

Entfernen Sie die Klasse in von dieser Linie

<div id="panel1" class="panel-collapse collapse"><!-- <-- removed class "in" --> 

Here's a bootply so you can see it in action

+0

Danke soviel –

+0

Sie sind willkommen, froh, es half - akzeptieren Sie bitte die Antwort, wenn Sie –

Verwandte Themen