Twitter Bootstrap 축소 파일에 열기 / 닫기 아이콘 추가 (아코디언)

87

이 간단한 버전의 Bootstrap 아코디언을 설정했습니다 .

간단한 아코디언 : http://jsfiddle.net/darrenc/cngPS/

현재 아이콘은 아래쪽을 가리 키지 만 아이콘 의 클래스를 다음과 같이 변경하기 위해 구현해야하는 JS가 무엇인지 아는 사람이 있습니까?

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

... 확장 되면 위를 가리키고 접었을 때 다시 아래로 토글됩니다 .

javascript  jquery  twitter-bootstrap 
— 대런
소스

답변:

94

여기에 부트 스트랩 3 (나와 같은)에서 해결책을 찾는 사람들을위한 답이 있습니다.

HTML 부분 :

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    <span class="glyphicon glyphicon-minus"></span>
  </button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>

js 부분 :

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

아코디언 예 :

Bootply 아코디언 예

— 안드레이 베베
소스
6
부트 스트랩 3.x에 정확히 필요한 것. 2.x를 사용하는 경우 .bs.collapse. shown and hidden to show and hide아코디언이 열리기 전에 애니메이션이 발생하도록 변경했습니다 .
— user1881482
2
너무 버전 4에서 실행되기 때문에이 정답이어야한다
— 안드레스 펠리페
중첩 된 아코디언은 어떻습니까? 자식 요소에는 쉐브론이 없지만 여전히 부모에서 스위치를 얻고 있습니다.
— 밀교
48

다음은 Bootstrap 2.x에 대한 나의 접근 방식입니다. 그것은 단지 CSS입니다. JavaScript가 필요하지 않습니다.

    .accordion-caret .accordion-toggle:hover {
        text-decoration: none;
    }
    .accordion-caret .accordion-toggle:hover span,
    .accordion-caret .accordion-toggle:hover strong {
        text-decoration: underline;
    }
    .accordion-caret .accordion-toggle:before {
        font-size: 25px;
        vertical-align: -3px;
    }
    .accordion-caret .accordion-toggle:not(.collapsed):before {
        content: "▾";
        margin-right: 0px;
    }
    .accordion-caret .accordion-toggle.collapsed:before {
        content: "▸";
        margin-right: 0px;
    }

다음 과 같이 accordion-caret 클래스 를 accordion-group div에 추가하십시오.

<div class="accordion-group accordion-caret">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
            <strong>Header</strong>
        </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
        <div class="accordion-inner">
            Content
        </div>
    </div>
</div>
— 마틴 위크 먼
소스
2
저는이 접근 방식을 정말 좋아했습니다. 특히 눈에 잘 띄지 않기 때문입니다.
— J Castillo
4
한 가지 예외로 작동한다는 것을 알았습니다. 초기 캐럿은 항상 모든 섹션에 대해 확장되어 표시됩니다. 확장했다가 다시 축소하면 맞습니다.
— Robb Sadler 2014 년
8
@Robb-html의 "collapse"요소에 "collapsed"클래스를 포함시켜 초기 화살표 문제를 해결했습니다. 내 html은 약간 다르지만 아마도 작동 할 것입니다
— Mark B
1
나는 CSS 솔루션도 좋아합니다. 내 동료 중 일부는 자바 스크립트보다 CSS에 더 익숙하기 때문에 이것이 우리 팀에게 더 나은 솔루션이었습니다. 초기화 부분을 처리해 주셔서 감사합니다. 이제 훌륭하게 작동합니다!
— Hcabnettek 2014
42

Bootstrap Collapse에는 반응 할 수있는 몇 가지 이벤트가 있습니다.

$(document).ready(function(){    
    $('#accordProfile').on('shown', function () {
       $(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
    });

    $('#accordProfile').on('hidden', function () {
       $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
    });
});
— 필립 호프만
소스
1
머플, 당신은 스타입니다! 좋은 너무 단순, 그 ;-) 주셔서 감사합니다
— 대런
1
천만에요! 표시 및 숨김 대신 표시 또는 숨김을 사용할 수도 있습니다. 그것을 시도하십시오. 선호하는 것을 볼 수 있습니다.
— Philipp Hofmann
1
안녕하세요 Muffs, 라이브 테스트 사이트에서 이것이 작동하지 않는 이유에 대한 아이디어가 있습니까? datascrew.co.uk/gordonedge.com
— 대런
당신은 내가 위의 코드를 삽입 한 main.js에 ... .ready $ (문서)을 (추가합니다.
— 필립 호프만에게
8
Bootstrap3 : 이벤트 이름에는 .bs.collapse가 있어야하므로 on ( 'hide.bs.collapse') 및 on ( 'show.bs.collapse') 또는 CSS 전환을 더 추가하려는 경우 표시 / 숨겨집니다. 그것.
— Langeleppel 2014 년
21

CSSes pseudo-selector 사용 : HTML을 약간 수정하여 No JS 답변에 Bootstrap 3의 통합 Glyphicons를 사용한 후 ...

CSS

.panel-heading [data-toggle="collapse"]:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e072"; /* "play" icon */
    float: right;
    color: #b0c5d8;
    font-size: 18px;
    line-height: 22px;

    /* rotate "play" icon from > (right arrow) to down arrow */
    -webkit-transform: rotate(-90deg);
    -moz-transform:    rotate(-90deg);
    -ms-transform:     rotate(-90deg);
    -o-transform:      rotate(-90deg);
    transform:         rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(90deg);
    -moz-transform:    rotate(90deg);
    -ms-transform:     rotate(90deg);
    -o-transform:      rotate(90deg);
    transform:         rotate(90deg);
}

HTML

class="collapsed"기본적으로 닫혀있는 앵커 태그에 추가 합니다.

이것은 다음과 같은 앵커를 돌릴 것입니다.

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

으로

<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

CodePen 라이브 예제

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

스크린 샷

JSBin에서 어떻게 나타나는지

— Bafromca
소스
1
이 jsbin 링크가보고 된 바있다
— 닉 바틀렛을
2
CodePen으로 옮겼습니다. 신고 해 주셔서 감사합니다. 시도 해봐!
— bafromca 2014 년
16

@muffls 답변에 추가되어 모든 트위터 부트 스트랩 축소와 함께 작동하고 애니메이션이 시작되기 전에 화살표를 변경합니다.

$('.collapse').on('show', function(){
    $(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
    $(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});

HTML 구조에 따라 parent().

— 존 매그놀리아
소스
1
하나는 그것을 떨어 & 그것은 나를 위해 일한 - 바로 사용 아이콘 - 갈매기 오른쪽에 수정 대신 왼쪽
— azcoastal
1
이것은 나를 위해 작동합니다. 다른 코드는 클릭 한 탭 대신 클릭하면 모든 탭의 클래스를 변경합니다. :)
— vignesh
10

최고의 코드는 다음과 같습니다.

  $('#accordion1').collapse({
    toggle: false
  }).on('show',function (e) {
        $(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
      }).on('hide', function (e) {
        $(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
      });
— user2273425
소스
2
이것은 나에게 유일한 작업 솔루션입니다. 나머지는 모든 아코디언 그룹의 클래스를 전환합니다. 건배 :)
— 막시무스ツ
6

관심이있는 사람은 이벤트 이름을 변경했기 때문에 BS3를 사용하는 방법입니다.

$('.collapse').on('show.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-down fa-caret-right');
});

예제의 클래스 이름을 귀하의 경우에 사용하는 이름으로 변경하면됩니다.

— rbsthlm
소스
1
감사합니다 b3rgstrom, 감사합니다. 다음에 BS3를 사용할 때 확인해 보겠습니다.
— Darren
1
아니 probs는 사람이 :) 같은 문제와 미래에 질문을 찾을 수 있다고 생각하지
— rbsthlm
5

가장 읽기 쉬운 CSS 전용 솔루션은 아마도 aria-expanded 속성을 사용하는 것입니다. aria-expanded = "false"를 모든 접기 요소에 추가해야합니다. 이는로드시 설정되지 않기 때문입니다 (첫 번째 클릭에서만).

HTML :

<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>

CSS :

h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
    display: none;
}

h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
    display: inline;
}

Bootstrap 3.x에서 작동합니다.

— 안드레아스 베르그스트롬
소스
1
이것은 완벽하게 작동합니다. 내 앵커 태그는 데이터 전환을했기 때문에, 나는 단순히 CSS의에 H2 변경
— MC9000
3

@ john-magnolia가 게시 한 것에서 추가로 개선되고 일부 문제를 해결하는 내 솔루션이 있습니다.

/**
 * Toggle on/off arrow for Twitter Bootstrap collapsibles.
 *
 * Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
 */
function animateCollapsibles() {

    $('.collapse').on('show', function() {
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
    }).on('hide', function(){
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
    });
}

다음은 마크 업의 예입니다.

<div class="accordion" id="accordion-send">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
                <i class="icon icon-chevron-right"></i> Send notice
            </a>
        </div>
        <div id="collapse-refund" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>Lorem ipsum Toholampi city</p>
            </div>
        </div>
    </div>
</div>
— 미코 오타 마아
소스
1
좋은 사람들-나는 멍청한 느낌이 들지만, 이러한 솔루션 중 어느 것도 작동하지 않습니다. -S 내가 생각할 수있는 유일한 차이점은 새로운 부트 스트랩 3을 사용하고 따라서 클래스 "glyphicon glyphicon-chevron-right. 포인터?
— benteh
2
Bootstrap 3은 이전 버전과 호환되는 릴리스가 아닙니다. 코드를 마이그레이션하는 방법은 Bootstrap 3 문서를 참조하십시오.
— Mikko Ohtamaa 2013 년
1
안녕하세요, Mikko, 고마워요. 예, 저는 그걸 모아서 좋은 도움을 받았습니다 : stackoverflow.com/questions/18147338/…
— benteh
3

또한 (와 같이 하나의 jQuery 셀렉터를 사용하는 부트 스트랩 V3 용액 (이벤트가 다른 이름을 가질 경우), 여기에 ) :

$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
    $(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
— Geert
소스
훌륭한 답변
— 나빈 DA
3

이것이 내가 js없이하는 방법입니다.

나는 glyphicon-triangle-right 아이콘을 사용했지만 다른 아이콘과 함께 작동합니다. 패널이 열리거나 열리지 않을 때 아이콘에 90도 회전을 적용한다는 것입니다. 나는 이것을 위해 Bootstrap 3.3.5 를 사용하고 있습니다.

CSS 코드

h4.panel-title a {
    display: block;

}
h4.panel-title a.collapsed .glyphicon-triangle-right {
        color: #ada9a9 !important;
        transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
        color: #515e64 !important;
        transform: rotate(90deg);
}

이것은 부트 스트랩 예제에서 가져온 HTML 구조입니다.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="headingOne">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            Proven Expertise
                                            <span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                    <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>
— 제너럴 일렉트릭
소스
이 방법은 저에게 효과적이지만 초기 상태는 90deg 회전합니다. 초기 상태를 회전하지 않는 (0deg) 방법을 친절하게 제안 해 주시겠습니까? 감사!
— Tsung-Ting Kuo
1
앵커 요소에 class = "collapsed"를 추가하여 여러분에게 일어나는 일을 피하십시오
— General Electric
응답 해 주셔서 감사합니다! 실제로 '<h4 class = "panel-title collapsed">'를 시도했지만 운이 없습니다. 이것이 맞습니까?
— Tsung-Ting Kuo
1
onClick 이벤트가 실행될 때 부트 스트랩 js가 변경되기 때문에 앵커 태그에 있어야합니다.이 페이지에서 확인하십시오. 제가 언급 한 acubavoy.com/preguntas-frequentes
— General Electric
2

위의 어느 것도 나를 위해 일하지 않았지만 이것을 생각해 내고 작동했습니다.

function toggleChevron(el) {
  if ($(el).find('i').hasClass('icon-chevron-left'))
      $(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
  else 
      $(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}

HTML 구현 :

<div class="accordion" id="accordion-send">
  <div class="accordion-group">
    <div class="accordion-heading" onClick="toggleChevron(this)">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
        <i class="icon icon-chevron-right"></i> Send notice
      </a>
      ...
— 조슈아 벤슨
소스
1

@RobSadler :

RE Martin Wickman의 CSS 전용 버전 ...

앵커 태그에 아코디언 캐럿을 배치하고 기본적으로 축소 된 클래스를 제공하여이 문제를 해결할 수 있습니다. 이렇게 :

<div class="accordion-group">
<div class="accordion-heading">
    <a class="accordion-toggle accordion-caret collapsed" data-toggle="collapse" href="#collapseOne">
        <strong>Header</strong>
    </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="accordion-inner">
        Content
    </div>
</div>

그것은 나를 위해 일했습니다.

— RioBrewster
소스
1

Bootstrup 3.2 + FontAwesome 용

$(document).ready(function(){    
    $('#accordProfile').on('shown.bs.collapse', function () {
       $(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
    });

    $('#accordProfile').on('hidden.bs.collapse', function () {
       $(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
    });
});

때로는 그렇게 작성해야합니다. 그렇다면 

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');

숨기기 메뉴를 누르면 자동으로 생성 (class = "collapsed")됩니다.

ps 트리 메뉴를 만들어야 할 때

— 포포 브 안드레이
소스
1

이것은 여러 가지 방법으로 답을 얻었지만 내가 생각 해낸 것은 부트 스트랩 3과 멋진 글꼴로 나에게 가장 간단하고 쉬운 것이었다. 난 그냥했다

$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});

이것은 보여주고 싶은 아이콘의 CSS 클래스를 토글합니다. 이것을 적용하려는 항목에 클래스 토글 러 를 추가합니다 . 아이콘을 토글하려는 모든 항목에 추가 할 수 있습니다.

— 미카 몬토야
소스
0

축소 기능 자체를 사용하는 자바 스크립트가없는 또 다른 솔루션 :

/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
  display: inline; }
.expand-icon.collapsing {
  display: none; }

/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
 <span class="my-collapse collapse-icon collapse in">
  <span class="glyphicon glyphicon-collapse-up"></span>
 </span>
 <span class="my-collapse expand-icon collapse">
  <span class="glyphicon glyphicon-expand"></span>   
 </span>
</a>
— Sebastian Sangervasi
소스
0

Bootstrap 3을 사용하는 CSS 전용 (및 아이콘없는) 솔루션의 경우 위의 Martin Wickman의 답변을 기반으로 약간의 조작이 필요했습니다.

BS3의 패널에서 수행 되었기 때문에 아코디언 * 표기법을 사용하지 않았습니다.

또한 페이지로드시 열리는 항목에 대한 초기 HTML aria-expanded = "true"를 포함해야했습니다.

다음은 내가 사용한 CSS입니다.

.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }

내 정리 된 HTML은 다음과 같습니다.

<div id="acc1">    
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
                    </a>
            </span>
        </div>
        <div id=“acc1-1” class="panel-collapse collapse in">
            <div class="panel-body">
                Text 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
                    </a>
            </span>
        </div>
        <div id=“acc1-2” class="panel-collapse collapse">
            <div class="panel-body">
                Text 2                  
            </div>
        </div>
    </div>
</div>
— 제시카 프레 더릭
소스
0

가능한 가장 짧은 대답.

HTML

<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
    <span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>

JS :

<script type="text/javascript">
 $(function () {
     $('a[data-toggle="collapse"]').click(function () {
     $(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
     })
 })
 </script>

물론 앵커 태그 대신 선택자에 대해 무엇이든 사용할 a수 있으며 this아이콘이 클릭 한 요소 외부 에있는 경우 대신 특정 선택기를 사용할 수도 있습니다 .

— Junaid
소스
0

다음은 다소 머티리얼 디자인, 부트 스트랩 4.5 / 5 알파 및 완전히 비 자바 스크립트를 사용하여 확장 가능한 섹션을 생성하는 솔루션입니다.

헤드 섹션 스타일

<style>
[data-toggle="collapse"] .fa:before {
    content: "\f077";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f078";
}
</style>

본문 html

<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
    <i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
    CONTENT GOES IN HERE
</div>
— 윌리엄 월리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.