Я не сильно изменил ваше решение, просто остановив код, если класс .answer
содержит класс .active
. Пожалуйста, проверьте фрагмент кода
$(function () {
let answers = $('.answer');
$('.faq .ask').on('click', slideAnswer);
function slideAnswer() {
let currentAnswer = $(this).next(),
currentAnswerState = $(this).siblings('.answer');
if (currentAnswerState.hasClass('active')) {
return true;
}
currentAnswer.addClass('active');
answers.not(currentAnswer).slideUp(500).removeClass('active');
$(this).next().stop(true).slideToggle(500, function () {
currentAnswer.stop(true).slideUp;
});
}
});
.item .ask {
background: #ccc;
}
.item .answer {
border: 1px solid #ccc;
padding: 10px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<div class="item">
<div class="ask">1. Some question №1</div>
<div class="answer">
<p>Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="item">
<div class="ask">2. Some question №2</div>
<div class="answer">
<p>Lorem ipsum dolor .</p>
</div>
</div>
<div class="item">
<div class="ask">3. Some question №3</div>
<div class="answer">
<p>Lorem ipsum dolor sit .</p>
</div>
</div>
</div>
Это возможно в Боке, можно найти простой пример на этот страница.
import pandas as pd
from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.stocks import AAPL
df = pd.DataFrame(AAPL)
df['date'] = pd.to_datetime(df['date'])
output_file("datetime.html")
# create a new plot with a datetime axis type
p = figure(plot_width=800, plot_height=250, x_axis_type="datetime")
p.line(df['date'], df['close'], color='navy', alpha=0.5)
show(p)