Отображение разделов меню аккордеона

207

15 декабря 2016, 16:18

Есть меню аккордеон, в котором все разделы скрыты. При нажатии на заголовок они открываются. Как доделать так, чтобы 1 раздел был всегда открыт, но при нажатии тоже закрывался?

JS:

(function($) {
    var allPanels = $('.accordion > dd').hide();
    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();
        $(this).parent().next().slideDown();
        return false;
    });
})(jQuery);

HTML:

<dl class="accordion">
    <dt>
        <a href="javascript:void(0);">Настройка элементов</a>
    </dt>
    <dd>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </dd>
    <dt>
        <a href="javascript:void(0);">Настройка текста</a>
    </dt>
    <dd>3</dd>
    <dt>
        <a href="javascript:void(0);">Настройка текста</a>
    </dt>
    <dd>4</dd>
</dl>

Полный пример в fiddle.

Answer 1

Как простой вариант, можно проверять, виден ли блок. Если при клике блок не был виден, то показывать его:

jQuery(document).ready(function($) { 
    var allPanels = $('.accordion > dd').hide(); 
    $('.accordion > dt > a').on("click", function() { 
        var $block = $(this).parent().next(); 
        var visible = $block.is(':visible'); 
        allPanels.slideUp(); 
        if (!visible) { 
            $block.slideDown(); 
        } 
        return false; 
    }); 
});

.accordion { 
    font: 16px Sans-Serif; 
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.5); 
    border-radius:11px; 
    margin-top:0; 
} 
* .accordion dt, .accordion dd { 
    padding: 10px; 
    /*border: 1px solid black;*/ 
    border-bottom: 0; 
} 
.accordion dd { 
    margin-left: 0; 
} 
.accordion dt:last-of-type, .accordion dd:last-of-type { 
    /* border-bottom: 3px solid black;*/ 
} 
.accordion dt a, .accordion dd a { 
    display: block; 
    color: black; 
    font-weight: bold; 
} 
.accordion dd { 
    border-top: 0; 
    font-size: 12px; 
} 
.accordion dd:last-of-type { 
    border-top: 1px solid white; 
    position: relative; 
    top: -1px; 
}

<dl class="accordion"> 
    <dt> 
        <a href="">Настройка элементов</a> 
    </dt> 
    <dd> 
        <p>1</p> 
        <p>2</p> 
        <p>3</p> 
    </dd> 
     
    <dt> 
        <a href="">Настройка текста</a> 
    </dt> 
    <dd>3</dd> 
     
    <dt> 
        <a href="">Настройка текста</a> 
    </dt> 
    <dd>4</dd> 
</dl> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Если фраза "чтобы 1 раздел был всегда открыт" означает "первый раздел", а не "один раздел", то так:

  (function ($) {
        var allPanels = $('.accordion > dd').hide();
        $('.accordion > dt > a').click(function () {
            allPanels.slideUp();
            $(this).parent().next().slideDown();
            return false;
        });
    })(jQuery); 
$('.accordion > dd').first().show(); //магия

Answer 3

(function ($) {
    var allPanels = $('.accordion > dd:not(:eq(0))').hide();    
    $('.accordion > dt > a').click(function () {
        allPanels.not(this).slideUp();
        $(this).parent().next().stop().slideToggle();
        return false;
    });
})(jQuery);