बूटस्ट्रैप 3 संक्षिप्त दिखाएँ राज्य को शेवरॉन आइकन के साथ

Question

पतन के लिए बूटस्ट्रैप 3 जावास्क्रिप्ट उदाहरण पृष्ठ से लिए गए मूल उदाहरण का उपयोग करके , मैं शेवरॉन आइकन का उपयोग करके पतन की स्थिति दिखाने में सक्षम रहा हूं।

मेरे पास यह काम है:

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

यह काम करता है (सभी ब्राउज़रों में पूरी तरह से परीक्षण नहीं किया गया है), लेकिन मैं सोच रहा हूं कि क्या इसके लिए अधिक सुरुचिपूर्ण समाधान है?

आदर्श रूप से मैं कोर फ़ंक्शन का उपयोग करना चाहूंगा, लेकिन मुझे यकीन नहीं है कि इसके साथ समान परिणाम कैसे प्राप्त करें।

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})

यहाँ jsfiddle में एक कार्यशील संस्करण है ।

Comments

हाय, इस उदाहरण में, मैं कैसे सिर्फ पाठ के बजाय पूरे शीर्षक हाइपरलिंक बना सकता हूँ। दूसरे शब्दों में, जब मैं केवल पाठ ही नहीं, शीर्षक पैनल पर क्लिक करता हूं, तो मैं टॉगल प्रदर्शित करना चाहता हूं। मैं उसको कैसे करू?

— user1447718

— सदृश

@ user1447718 यहाँ एक फिडेल ठीक वैसा ही कर रहा है: JSFiddle मैं पूरे हेडर को क्लिक करने योग्य भी चाहता था, इसलिए मैंने कुछ समाधानों को मिला दिया जो मुझे SO (इस एक सहित) में मिला।

— पीटर VDE

Dperish की तरह, मैंने किया था यह

— स्टीव ग्रीन

Answer 1

निम्नलिखित HTML के लिए ( बूटस्ट्रैप 3 उदाहरणों से ):

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>

<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="#collapseOne">
          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 class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          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 class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          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>

दृश्य प्रभाव:

Comments

यह अच्छी तरह से काम करता है ... यहाँ आपके लिए एक jsFiddle है: jsfiddle.net/panchroma/3gYa3

— डेविड

फिडल में, सभी शेवरॉन शुरुआत में नीचे की ओर इशारा करते हैं। क्या इसके लिए एक आसान तय है?

— वुहर 8'14

मुझे प्रारंभिक अवस्था के लिए शुद्ध सीएसएस समाधान दिखाई नहीं देता है; यहाँ समस्या यह है कि बूटस्ट्रैप वर्ग को "ध्वस्त" लिंक में तब तक नहीं जोड़ता है जब तक कि आप कम से कम एक को न गिरा दें (भले ही वे सभी शुरू करने के लिए ढह गए हों)। फिर यह "ओपन" के लिंक से उस क्लास को हटा देता है। इसलिए चूंकि "ओपन" और "डिफ़ॉल्ट" में एक ही वर्ग है, इसलिए कोई अच्छा शुद्ध सीएसएस समाधान नहीं है। आदर्श रूप से यह बूटस्ट्रैप की जावास्क्रिप्ट को संशोधित करके "ओपन" क्लास को अलग करने के लिए जोड़ा जाएगा। तब तक, इसके साथ रहें, या अन्य उत्तरों में से एक से जेएस का उपयोग करें।

— कार्ल बुसिमा

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन कार्ल के मुद्दे का जवाब देने के लिए - यदि आप "एंकेरियन-टॉगल" के साथ सभी एंकर टैग पर "ध्वस्त" की श्रेणी जोड़ते हैं, तो आपके मुद्दे दूर हो जाते हैं .... इसलिए "एक्सीडेंट-टॉगल ढह गए" "। JQuery को तब वर्गों को जोड़ना और हटाना होगा जब इसकी आवश्यकता होगी।

— स्टीकपी

मैंने इस उदाहरण को संशोधित किया है ताकि पूरा हेडर क्लिक करने योग्य हो। एक छोटी सी बग मैंने नोटिस की है कि प्रत्येक पैनल के दाईं ओर स्थित पाठ को स्लाइड ओपन / क्लोज एनीमेशन के पूरा होने तक थोड़ा "धक्का" दिया जाता है। अगर किसी को पता है कि कैसे ठीक करने के लिए, कृपया। यहाँ की बेला है: अद्यतित JSFiddle

— पीटर VDE

Answer 2

आप इस तरह के कोड का उपयोग कर सकते हैं:

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

=> कार्य JsFiddle

Comments

यह एक बेहतर तरीका है zessx, अच्छी तरह से किया दोस्त। यह पहला साफ समाधान है जिसे मैंने बूटस्ट्रैप 3 लॉन्च के बाद देखा है।

— रयान स्कॉट

तुम भी इस्तेमाल कर सकते हैं$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);

— स्निपर वुल्फ

यदि आप अंत के बजाय पतन की शुरुआत में स्थानांतरित करने के लिए तीर पसंद करते हैं, तो आप $('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);इसके बजाय उपयोग कर सकते हैं

— विल पार्कर

यह बहुत अच्छा काम करता है। मैं आइकन को तेजी से टॉगल कैसे करूं?

— राहेल एस

@RachelS विल पार्कर का सुझाव इसे और तेज़ बनाता है।

— फिल जोलांस

Answer 3

सबसे ऊपर के उत्तर के साथ सुधार करने के लिए, आप में से कुछ ने पृष्ठ के प्रारंभिक भार पर ध्यान दिया होगा कि शेवरॉन एक ही दिशा में इंगित करते हैं। यह वर्ग को "ढह गए" तत्वों को जोड़कर ठीक किया जाता है जिन्हें आप ढह गए लोड करना चाहते हैं।

<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="#collapseOne">
          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 class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          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 class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          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>

यहाँ एक काम कर रहे बेला है: http://jsfiddle.net/3gYa3/585/

Answer 4

ब्लड्रेस के उत्तर पर सुधार:

आप निश्चित रूप से FontAwesome का उपयोग कर सकते हैं!

"पैनल-हेडिंग" वर्ग के साथ "ध्वस्त" को शामिल करना सुनिश्चित करें। "ध्वस्त" वर्ग को तब तक शामिल नहीं किया जाता है जब तक आप पैनल पर क्लिक नहीं करते हैं, इसलिए आप सही शेवरॉन प्रदर्शित करने के लिए "ध्वस्त" वर्ग को शामिल करना चाहते हैं (यानी, खुलने पर शेवरॉन और शेवरॉन-डाउन प्रदर्शित होने पर दाईं ओर प्रदर्शित होता है)।

एचटीएमएल

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
    <div class="collapse" id="collapseOrderItems1">
        <p>Lorem ipsum...</p>
    </div>
</div>

सीएसएस

.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054";   
}   

साथ ही, मौजूदा कक्षा का उपयोग करने के बजाय एक नया वर्ग बनाने के लिए यह एक अच्छा अभ्यास है।

उदाहरण के लिए कोडपेन देखें: http://codepen.io/anon/pen/PPxOJX

Comments

और फॉन्टव्यू 4 के साथ: तत्व के लिए fa-chevron-up और .collapsed .fa-chevron-up: {content: "\ f077";} से पहले; क्लास के लिए

— डेनिस चेनू

Answer 5

Biggates और स्टेकपी के लिए धन्यवाद। ड्रीमोनिक के प्रश्न के उत्तर के रूप में, मैंने सभी हेडर को क्लिक करने योग्य बनाने के लिए थोड़ा बदलाव किया (न केवल शीर्षक स्ट्रिंग और ग्लूप) और लिंक से रेखांकित किया। एक आइकनों को उसी पंक्ति में प्रकट करने के लिए मजबूर करने के लिए मैंने CSS निर्देशों के अंत में h4 को जोड़ा। यहाँ संशोधित कोड है:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <h4 class="panel-title">Collapsible Group Item #1</h4>
        </a>      
    </div>
    <div id="collapseOne" 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">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <h4 class="panel-title">Collapsible Group Item #2</h4>
        </a>      
    </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">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <h4 class="panel-title">Collapsible Group Item #3</h4>
        </a>      
    </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>

और संशोधित सीएसएस:

.panel-heading .accordion-toggle h4:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  
    content: "\e114";    
    float: right;        
    color: grey;        
    overflow: no-display;
}
.panel-heading .accordion-toggle.collapsed h4:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    
}
a.accordion-toggle{
    text-decoration: none;
}

Answer 6

यहाँ शुद्ध सीएसएस हेल्पर वर्गों की एक जोड़ी है जो आपको अपने html में किसी भी तरह की टॉगल सामग्री को संभालने की सुविधा देती है।

यह किसी भी तत्व के साथ काम करता है जिसे आपको स्विच करने की आवश्यकता होती है। जो कुछ भी आपका लेआउट है, उसे आप केवल .if-collapsed और .if-not-collapsed क्लासेस टॉगल तत्व के साथ तत्वों के एक जोड़े के अंदर रखें।

एकमात्र पकड़ यह है कि आपको यह सुनिश्चित करना होगा कि आप टॉगल की वांछित प्रारंभिक स्थिति डालते हैं। यदि यह शुरू में बंद हो गया है, तो टॉगल पर एक ढह वर्ग को रखें।

इसके लिए भी आवश्यकता है : चयनकर्ता नहीं , यह IE8 पर काम नहीं करता है।

HTML उदाहरण:

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

कम संस्करण:

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}

सीएसएस संस्करण:

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

Answer 7

मुझे पता है कि यह पुराना है, लेकिन जब से यह अब 2018 है, मैंने सोचा कि मैं कोड को सरल बनाने और उपयोगकर्ता के अनुभव को बढ़ाने के साथ-साथ ढह या नहीं के आधार पर शेवरॉन को घुमाकर इसे बेहतर बनाने का जवाब दूंगा। मैं हालांकि FontAwesome का उपयोग कर रहा हूं। यहाँ सीएसएस है:

a[data-toggle="collapse"] .rotate {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
}
a[data-toggle="collapse"].collapsed .rotate {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

यहाँ पैनल अनुभाग के लिए HTML है:

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <i class="fa fa-chevron-right pull-right rotate"></i>
        </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>

मैं बूटस्ट्रैप पुल-राइट का उपयोग करता है जिससे पैनल हेडिंग के दाईं ओर शेवरॉन खींच सकता है जो पूरी चौड़ाई और उत्तरदायी होना चाहिए। CSS एनीमेशन के सभी काम करता है और पैनल के ढहने या न होने के आधार पर शेवरॉन को घुमाता है। सरल।

Answer 8

सरल उदाहरण काम कर रहा है

• शरीर की स्थिति दिखाओ / छिपाओ
• इसके मूल में जाओ
• आइकन ढूंढें
• आइकॉन बदलें

सरल दर्ज करें

HTML :

<body>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
        </div>
        <div id="jai" class="accordion-body collapse in">
            <div>
                <div class="accordion-inner">body content 1</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 2</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
        </div>
        <div id="collapse3" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 3</div>
            </div>
        </div>
    </div>
</body>

जावास्क्रिप्ट

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-chevron-down")
           .removeClass("icon-chevron-down").addClass("icon-chevron-up");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-chevron-up")
           .removeClass("icon-chevron-up").addClass("icon-chevron-down");
});

Answer 9

या ... आप इस तरह से कुछ शैली डाल सकते हैं।

.panel-title a.collapsed {
     background: url(../img/arrow_right.png) center right no-repeat;
}
.panel-title a {
     background: url(../img/arrow_down.png) center right no-repeat;
}

http://codepen.io/anon/pen/GJjrQN

Answer 10

मैं फ़ॉन्ट भयानक का उपयोग कर रहा हूँ ! और एक पैनल ढह जाना चाहता था

        <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>

                <div class="collapse in" id="collapseOrderItems">
                            ....
                </div>
        </div>

और सीएसएस

.panel-heading .fa-chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";   
}

Answer 11

एंगुलर को यहां जावास्क्रिप्ट आधारित दृष्टिकोण के साथ मुद्दों का कारण लगता है (कम से कम जो मैंने कोशिश की है)। मुझे यह समाधान यहां मिला: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang । इसका सार यह data-ng-clickटॉगल बटन पर उपयोग करना और नियंत्रक का उपयोग करके बटन को बदलने की विधि बनाना है$scope संदर्भ है।

मुझे लगता है कि मैं और अधिक विवरण प्रदान कर सकता हूं ... मेरे बटन div की प्रारंभिक अवस्था के ग्लिफ़िकॉन पर सेट होते हैं जो वे ढहते हैं (ग्लिफ़िकॉन-शेवरॉन-राइट == ढह गए डिव)।

page.html:

<div class="title-1">
    <button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel-{{ p_idx }}" class="collapse sect">
    ...
</div>

controllers.js:

.controller('PageController', function($scope, $rootScope) {
    $scope.collapse = function (event) {
        $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
    };
)

Answer 12

एक लाइन।

i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }

इस उदाहरण में इसका उपयोग समूह की बंधनेवाला तालिका पंक्तियों के लिए किया जा रहा है। केवल एक चीज जो आपको करने की आवश्यकता है, वह है लक्ष्य वर्ग नाम (मेरा-पतन-नाम) अपने आइकन में जोड़ें:

<tr data-toggle="collapse" data-target=".my-collapse-name">
    <th><i class="fa fa-chevron-right my-collapse-name"></span></th>
    <th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
    <td></td>
    <td>Detail Row - Content</td>
</tr>

आप बूटस्ट्रैप के मूल कैरट वर्ग के साथ उपयोग करके <span class='caret my-collapse-name'></span>और इसे पूरा कर सकते हैंspan.caret.collapse.in { transform: rotate(90deg); }

Answer 13

यदि आप इसका उपयोग केवल पैनलों के साथ करने की कोशिश कर रहे हैं (नहीं, तो समझौते के अनुसार), इस कोड को आज़माएँ:

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
        </h4>
    </div>
    <div id="collapseExample" class="panel-collapse collapse in">
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

Answer 14

मैं एक शुद्ध HTML दृष्टिकोण चाहता था क्योंकि मैं html को गिराना और विस्तारित करना चाहता था जिसे एक टेम्पलेट के माध्यम से मक्खी पर जोड़ा गया था! मैं इसके साथ आया था ...

https://jsfiddle.net/3mguht2y/1/

var noJavascript = ":)";

जो किसी के काम आ सकता है :)