Скрыть div по умолчанию и показать его при щелчке с помощью начальной загрузки

Я хочу показать и скрыть div, но я хочу, чтобы он был скрыт по умолчанию и чтобы показывать и скрывать его при нажатии. Вот код, который я сделал:

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

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

Ответ 1

Просто добавьте воду style="display:none"; в <div>

Fiddles Я говорю: http://jsfiddle.net/krY56/13/

jQuery:

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

Предпочитает иметь класс CSS .hidden

.hidden {
     display:none;
}

Ответ 2

Здесь я предлагаю способ сделать это исключительно с использованием встроенных функций фреймворка Bootstrap.

Вам нужно убедиться, что у целевого div есть идентификатор.
Bootstrap имеет class "collapse", это скроет ваш блок по умолчанию. Если вы хотите, чтобы ваш div был разборным, и он будет показан по умолчанию вам нужно добавить класс "в" к краху. В противном случае поведение переключения не будет работать должным образом.
Затем, на вашей гиперссылке (также работает для кнопок), добавьте href атрибут, указывающий на ваш целевой div.
Наконец, добавьте атрибут data-toggle="collapse", чтобы указать Bootstrap, чтобы добавить соответствующий тег script к этому тегу.

Вот пример кода, который может быть скопирован непосредственно на странице, которая уже содержит структуру 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>

Ответ 3

Попробуйте следующее:

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

Ответ 4

Я понимаю, что этот вопрос немного устарел, и поскольку он появляется в поиске Google для подобной проблемы, я думал, что я немного расширюсь в ответ на ответ @CowWarrior. Я искал несколько похожее решение, и после прошивки бесчисленных SO вопросов/ответов и документации Bootstrap решение было довольно простым. Опять же, это будет использовать встроенный класс Bootstrap collapse для отображения/скрытия divs и Bootstrap "Collapse Event".

Я понял, что это легко сделать с помощью Аккордеона Bootstrap, но большую часть времени, хотя требуемая функциональность "немного" похожа на Аккордеон, она отличается тем, что хотелось бы показать скрыть <div> на основе, скажем, кнопок меню на navbar. Ниже это простое решение. Якорные метки (<a>) могут быть элементами навигации и на основе события коллапса соответствующий div заменит существующий div. Он выглядит слегка небрежным в CodeSnippet, но он довольно близок к достижению функциональности -

Все, что делает JavaScript, делает все остальные <div> скрытыми, используя

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

когда отображается загруженный <div>, проверяя событие Collapse shown.bs.collapse. Здесь загружается документация на событие Collapse.

Примечание: main-container - это просто пользовательский класс.

Здесь он идет -

$(".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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" 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>