jQuery простой складной Div? - PullRequest
Новая
       29

jQuery простой складной Div?

24 голосов
/ 13 декабря 2011

Я ищу правильный, простой, маленький код для следующих вещей:

  • Нажмите на элемент с примененным к нему классом.

  • DIV.CLASS - который расширяет и показывает скрытый контент.(slideDown - Toggle)

  • DIV.CLASS - который сворачивает и скрывает ранее показанный контент.(slideUp - Toggle)

Я создал jsFiddle здесь: http://jsfiddle.net/Q4PUw/1/

Так что, чтобы быть расплывчатым и простым, мне нужно знать, как получить DIV CLASSстать скрытым и видимым после того, как к элементу на той же странице будет применен КЛАСС, в котором будут активированы и деактивированы скрытый и / или видимый контент HTML.И мне нужно, чтобы он был скрыт по умолчанию.

Я просмотрел весь Интернет и нашел только очень сложные сценарии, но ничего простого.Я нашел Простых Аккордеонов ... Но они никогда не закрываются, они просто открывают еще один.

Спасибо всем за помощь, и я надеюсь, что смогу ответить на этот же вопрос для многих других людей...

Примечание: я очень мало знаю JavaScript и / или даже jQuery.

Ответы [ 4 ]

65 голосов
/ 13 декабря 2011 
$('.expand-one').click(function(){
    $('.content-one').slideToggle('slow');
});

Демо: http://jsfiddle.net/Q4PUw/2/

8 голосов
/ 05 декабря 2013

Я смотрел на это и хотел разборный div, который уже был разработан для меня. Затем я понял, что мне нужен был аккордеон jquery-ui с одной панелью. 

<div id="collapse">
   <h3>Collapse and Expand</h3>
   <div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
    collapsible: true,
    active: false
});
</script>

http://jsfiddle.net/MB4ch/1/

2 голосов
/ 25 ноября 2015

Я хотел сделать это с несколькими div, каждый со своим собственным триггером.Опираясь на ответ AlienWebguy выше:

HTML 

<div>
    <p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
    <p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
    <p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
    <p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

Javascript 

$('.expand').click(function(){
    target_num = $(this).attr('id').split('-')[1];
    content_id = '#expandable-'.concat(target_num);
    $(content_id).slideToggle('fast');
});

CSS 

.expand {
    font-weight: bold;
    font-style: italic;
    font-size: 12px;
    cursor: pointer;
}
.expandable {
    display:none;
}
div {
    margin: 10px;
}

https://jsfiddle.net/Q4PUw/3767/

0 голосов
/ 20 января 2016

Плохая идея использовать аккордеон.Лучше создать свой собственный свертываемый блок.

Пример: 

function InitSpoilBlock(idClicked)
    {
        $(idClicked).on('click', function(e){
            var textArray = ['blind','slide'];//here you can add other effects

            var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];

            $(e.target).parent().children(".HiderPanel").toggle(randomEffect);
        });
    }

, поэтому, когда вы напишите такой html: 

<div class="HiderContainer">
    <a href="#" class="Hider">More</a>
    <div class="HiderPanel">
        Spoiled block of html
    </div>
</div>

и после загрузки страницы вы будете вызывать 

InitSpoilBlock('.Hider');

Все блоки можно будет свернуть и спрятать со случайной анимацией.Или вы также можете использовать одну точную анимацию.

...