При нажатии на конкретный элемент li
- я хочу, чтобы он мог открыть соответствующий элемент div
.
У меня есть следующий код:
<ul class="no-padding pro-list">
<li><a href="#" class="pro-1 pro">A</a>
<div class="proc-description panel-1">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>
Lorem ipsum doner inut.
Lorem ipsum doner inut.
</p>
</div>
</li>
<li><a href="#" class="pro-2 pro">B</a>
<div class="proc-description panel-2">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>
Lorem ipsum doner inut.
Lorem ipsum doner inut.
</p>
</div>
</li>
<li><a href="#" class="pro-3 pro">C</a>
<div class="proc-description panel-3">
<p>a</p>
<p>b</p>
<p>c</p>
</div>
</li>
<li><a href="#" class="pro-4 pro">D</a>
<div class="proc-description panel-4">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>
Lorem ipsum doner inut.
Lorem ipsum doner inut.
</p>
</div>
</li>
<li><a href="#" class="pro-5 pro">E</a>
<div class="proc-description panel-5">
Hello world! Lorem ipsum doner inut.
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>
Lorem ipsum doner inut.
Lorem ipsum doner inut.
</p>
</div>
</li>
<li><a href="#" class="pro-6 pro">F</a>
<div class="proc-description panel-6">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>
Lorem ipsum doner inut.
Lorem ipsum doner inut.
</p>
</div>
</li>
<li><a href="#" class="pro-7 pro">G</a>
<div class="proc-description panel-7">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>
Lorem ipsum doner inut.
Lorem ipsum doner inut.
</p>
</div>
</li>
<li><a href="#" class="pro-8 pro">H</a>
<div class="proc-description panel-8">
<p>Lorem ipsum doner inut.</p>
<p>Lorem ipsum doner inut.</p>
<p>
Lorem ipsum doner inut.
Lorem ipsum doner inut.
</p>
</div>
</li>
<li><a href="#" class="proc-9 ">I</a></li>
<li><a href="#" class="proc-10 ">J</a></li>
<li><a href="#" class="proc-11 ">K</a></li>
</ul>
Он отлично работает, когда я добавляю этот script:
<script>
jQuery(document).ready(function ($) {
jQuery(".pro-2").click(function () {
jQuery(".panel-2").slideToggle("slow");
});
});
</script>
Однако я хочу сделать его динамичным. Вместо того, чтобы делать так много функций для каждого класса и класса div, я хочу создать 1 функцию, которая может переключать все элементы li
.