Я хочу показывать div.panel, когда я нажимаю на div.accordion. Однако этот код показывает оба элемента div.panel, а не только дочерний элемент аккордеона, который был нажат.
Вот мой код. У меня есть решение с Javascript для переключения display: none на block, но с этим методом нет анимации.
$(document).ready(function() {
$(".panel").hide()
});
$(".accordion").click(function() {
if ($(".panel:visible").length != 0) {
$(".panel").slideUp("normal");
} else {
$(".panel").slideDown("normal");
}
return false;
});.accordion {
cursor: pointer;
border: none;
outline: none;
transition: 0.9s;
margin: 0 auto;
}
.carles {
background-image: url('/images/carles.jpeg');
background-repeat: no-repeat;
width: 35vh;
height: 35vh;
margin: 0 auto;
background-position: center;
border-radius: 5px;
}
.charlotte {
background-image: url('/images/charlotte.jpeg');
background-repeat: no-repeat;
width: 35vh;
height: 35vh;
margin: 0 auto;
background-position: center;
border-radius: 5px;
}
.charlotte:hover,
.carles:hover,
.active>.carles,
.active>.charlotte {
filter: grayscale(50%);
-webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
}
/* Panel */
.panel {
padding: 18px 18px;
background-color: rgba(255, 255, 255, 1);
color: #777;
overflow: hidden;
text-align: justify;
}
.nom {
margin-top: 10%;
text-align: center;
}
.coord {
background-color: rgba(0, 0, 0, 0.1);
padding: 10%;
}
.coord i {
font-size: 2em;
}
.coord p,
.coord a {
font-weight: bold;
text-align: left;
margin-left: 4em;
}<div class = "accordion col-6">
<div class = "carles"></div>
<div class = "nom">
<h3>Name 1</h3>
<p>Employé polyvalent</p>
<i class = "fas fa-caret-down"></i>
</div>
<div class = "panel">
<ul>
<li>Docteur en Géographie</li>
<li>Université de Lille & Université de Valencia</li>
<li>15 ans d'expériences dans l'éolien</li>
<li>Plus de 100 MW éoliens développés</li>
<li>Fondateur d'une société en 2004</li>
</ul>
<div class = "coord">
<table>
<tr>
<td><i class = "fas fa-mobile-alt"></i></td>
<td>
<p>06 07 85 88 88</p>
</td>
</tr>
<tr>
<td><i class = "far fa-envelope"></i></td>
<td><a href = "mailto:[email protected]">[email protected]</a></td>
</tr>
</table>
</div>
</div>
</div>
<div class = "accordion col-6">
<div class = "charlotte">
</div>
<div class = "nom">
<h3>Name 2</h3>
<p>Employé polyvalent</p>
<i class = "fas fa-caret-down"></i>
</div>
<div class = "panel">
<ul>
<li>Docteur en Géographie</li>
<li>Université de Lille & Université de Valencia</li>
<li>15 ans d'expériences dans l'éolien</li>
<li>Plus de 100 MW éoliens développés</li>
<li>Fondateur d'une société en 2004</li>
</ul>
<div class = "coord">
<table>
<tr>
<td><i class = "fas fa-mobile-alt"></i></td>
<td>
<p>06 07 85 88 88</p>
</td>
</tr>
<tr>
<td><i class = "far fa-envelope"></i></td>
<td><a href = "mailto:[email protected]">[email protected]</a></td>
</tr>
</table>
</div>
</div>
</div>


![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Во-первых, вам нужно разместить всю логику, которая зависит от загрузки DOM, в обработчике document.ready.
Что касается вашей проблемы, проблема заключается в том, что вы выбираете элементы все.panel в DOM при каждом .accordion щелчке.
Чтобы это работало так, как вам нужно, вместо этого вам нужно использовать обход DOM, чтобы найти .panel, связанный с .accordion, который был нажат. Для этого вы можете использовать find(). Затем вам нужно скрыть все остальные несвязанные .panel элементы.
$(document).ready(function() {
$(".accordion").click(function() {
var $target = $(this).find('.panel');
$('.panel').not($target).slideUp();
$target.slideToggle();
});
});.accordion {
cursor: pointer;
border: none;
outline: none;
transition: 0.9s;
margin: 0 auto;
}
.carles {
background-image: url('/images/carles.jpeg');
background-repeat: no-repeat;
width: 35vh;
height: 35vh;
margin: 0 auto;
background-position: center;
border-radius: 5px;
}
.charlotte {
background-image: url('/images/charlotte.jpeg');
background-repeat: no-repeat;
width: 35vh;
height: 35vh;
margin: 0 auto;
background-position: center;
border-radius: 5px;
}
.charlotte:hover,
.carles:hover,
.active>.carles,
.active>.charlotte {
filter: grayscale(50%);
-webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
}
/* Panel */
.panel {
padding: 18px 18px;
background-color: rgba(255, 255, 255, 1);
color: #777;
overflow: hidden;
text-align: justify;
display: none;
}
.nom {
margin-top: 10%;
text-align: center;
}
.coord {
background-color: rgba(0, 0, 0, 0.1);
padding: 10%;
}
.coord i {
font-size: 2em;
}
.coord p,
.coord a {
font-weight: bold;
text-align: left;
margin-left: 4em;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "accordion col-6">
<div class = "carles"></div>
<div class = "nom">
<h3>Name 1</h3>
<p>Employé polyvalent</p>
<i class = "fas fa-caret-down"></i>
</div>
<div class = "panel">
<ul>
<li>Docteur en Géographie</li>
<li>Université de Lille & Université de Valencia</li>
<li>15 ans d'expériences dans l'éolien</li>
<li>Plus de 100 MW éoliens développés</li>
<li>Fondateur d'une société en 2004</li>
</ul>
<div class = "coord">
<table>
<tr>
<td><i class = "fas fa-mobile-alt"></i></td>
<td>
<p>06 07 85 88 88</p>
</td>
</tr>
<tr>
<td><i class = "far fa-envelope"></i></td>
<td><a href = "mailto:[email protected]">[email protected]</a></td>
</tr>
</table>
</div>
</div>
</div>
<div class = "accordion col-6">
<div class = "charlotte">
</div>
<div class = "nom">
<h3>Name 2</h3>
<p>Employé polyvalent</p>
<i class = "fas fa-caret-down"></i>
</div>
<div class = "panel">
<ul>
<li>Docteur en Géographie</li>
<li>Université de Lille & Université de Valencia</li>
<li>15 ans d'expériences dans l'éolien</li>
<li>Plus de 100 MW éoliens développés</li>
<li>Fondateur d'une société en 2004</li>
</ul>
<div class = "coord">
<table>
<tr>
<td><i class = "fas fa-mobile-alt"></i></td>
<td>
<p>06 07 85 88 88</p>
</td>
</tr>
<tr>
<td><i class = "far fa-envelope"></i></td>
<td><a href = "mailto:[email protected]">[email protected]</a></td>
</tr>
</table>
</div>
</div>
</div>Также обратите внимание на использование CSS для скрытия элементов .panel по умолчанию. Если вы используете JS, у вас будет FOUC во время загрузки страницы.
Хорошо... Это работает очень хорошо.. Большое спасибо за ответ и за совет!