Несколько примеров настройки и стилизации jQuery UI accordion для вывода вопросов и ответов на них.
Документация:
http://api.jqueryui.com/accordion/
Подключение JQuery UI:
https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Вопрос 1</div>
<div>
<p>jQuery UI Accordion отображает складные панели для представления</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Вопрос 2</div>
<div>
<p>jQuery UI Accordion отображает складные панели для представления</p>
</div>
</div>
</div>
$('.accordion').accordion({
active: true,
collapsible: true,
heightStyle: 'content',
header: '> .accordion-item > .accordion-header'
});
.accordion .ui-accordion-header {
font-size: 16px;
text-decoration: underline;
line-height: 1.2;
margin: 0 0 0 0;
padding: 10px 0 10px 30px;
outline: none;
cursor: pointer;
background: url(/down.png) 0 15px no-repeat;
}
.accordion .ui-state-active {
background-image: url(/up.png);
}
.accordion .ui-accordion-content {
padding: 0 0 0 40px;
font-size: 14px;
line-height: 1.4;
color: #444;
}
Результат:
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Вопрос 1</div>
<div>
<p>jQuery UI Accordion отображает складные панели для представления</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Вопрос 2</div>
<div>
<p>jQuery UI Accordion отображает складные панели для представления</p>
</div>
</div>
</div>
$('.accordion').accordion({
active: true,
collapsible: true,
heightStyle: 'content',
header: '> .accordion-item > .accordion-header'
});
.accordion .ui-accordion-header {
font-size: 16px;
text-decoration: underline;
line-height: 1.2;
margin: 0;
padding: 10px 0;
outline: none;
cursor: pointer;
}
.accordion .ui-accordion-header:after {
content: '';
display: inline-block;
vertical-align: middle;
margin-left: 10px;
width: 16px;
position: relative;
top: 2px;
height: 16px;
background: url(/502/down.png) 0 0 no-repeat;
}
.accordion .ui-state-active:after {
background-image: url(/up.png);
}
.accordion .ui-accordion-content {
padding: 0;
font-size: 14px;
line-height: 1.4;
color: #444;
}