기본적으로 div를 숨기고 부트 스트랩으로 클릭시 표시

기본적으로 div를 숨기고 부트 스트랩으로 클릭시 표시

---

를 표시하고 숨기고 div싶지만 기본적으로 숨기고 클릭시 표시하고 숨길 수 있기를 원합니다. 내가 만든 코드는 다음과 같습니다.

<a class="button" onclick="$('#target').toggle();">
 <i class="fa fa-level-down"></i>
</a>

<div id="target"> 
 Hello world... 
</div>

---

그냥 물 style="display:none";을 추가 하십시오<div>

내가 말하는 바이올린 : http://jsfiddle.net/krY56/13/

jQuery :

function toggler(divId) {
    $("#" + divId).toggle();
}

CSS 클래스를 선호 .hidden

.hidden {
     display:none;
}

---

여기에서는 Bootstrap 프레임 워크 내장 기능을 사용하여이를 수행하는 방법을 제안합니다.

1. 대상 div에 ID가 있는지 확인해야합니다 .
2. 부트 스트랩에는 class"축소"가 있으며 이는 기본적으로 블록을 숨 깁니다. div를 접을 수 있고 기본적으로 표시하려면 접기에 "in"클래스를 추가해야합니다. 그렇지 않으면 토글 동작이 제대로 작동하지 않습니다.
3. 그런 다음 하이퍼 링크 (버튼에도 작동)에서 대상 div를 가리키는 href 속성을 추가합니다.
4. 마지막 data-toggle="collapse"으로이 태그에 적절한 토글 스크립트를 추가하도록 Bootstrap에 지시 하는 속성 을 추가합니다.

다음은 이미 Bootstrap 프레임 워크가 포함 된 페이지에 직접 복사하여 붙여 넣을 수있는 코드 샘플입니다.

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
    This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
    This div (Bar) is shown by default and can toggle
</div>

---

이걸로 해봐:

<button class="button" onclick="$('#target').toggle();">
    Show/Hide
</button>
<div id="target" style="display: none">
    Hide show.....
</div>

---

나는이 질문이 약간 오래되었다는 것을 알고 있으며 비슷한 문제에 대한 Google 검색에 표시되기 때문에 @CowWarrior의 답변 위에 조금 더 확장 할 것이라고 생각했습니다. 나는 다소 유사한 솔루션을 찾고 있었고 수많은 질문 / 답변 및 부트 스트랩 문서를 샅샅이 뒤져서 솔루션은 매우 간단했습니다. 다시 말하지만, 이것은 내장 된 Bootstrap collapse클래스를 사용하여 div와 Bootstrap의 "Collapse Event"를 표시하거나 숨 깁니다.

제가 깨달은 것은 부트 스트랩 아코디언을 사용하면 쉽게 할 수 있다는 것입니다.하지만 대부분의 경우 필요한 기능이 아코디언과 "다소"유사하지만 숨기기를 <div>기준으로 표시하려는 방식이 다릅니다 . 예를 들어 navbar. 다음은 이에 대한 간단한 해결책입니다. 앵커 태그 ( <a>)는 navbar 항목이 될 수 있으며 축소 이벤트를 기반으로 해당 div가 기존 div를 대체합니다. CodeSnippet에서는 약간 엉성해 보이지만 기능성 달성에 매우 가깝습니다.

자바 스크립트가 수행하는 모든 다른 모든하게 <div>사용 숨기기

$(".main-container.collapse").not($(this)).collapse('hide');

<div>Collapse 이벤트를 확인 하여로드 된 경우 표시됩니다 shown.bs.collapse. 다음 은 Collapse Event에 대한 부트 스트랩 문서 입니다.

Note: main-container is just a custom class.

Here it goes-

$(".main-container.collapse").on('shown.bs.collapse', function () {    
//when a collapsed div is shown hide all other collapsible divs that are visible
       $(".main-container.collapse").not($(this)).collapse('hide');
});

<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"/>

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<a href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</a>

<div id="Bar" class="main-container collapse in">
    This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
    This div (#Foo) is hidden by default
</div>

참고URL : https://stackoverflow.com/questions/23873005/hide-div-by-default-and-show-it-on-click-with-bootstrap