ドロップダウンメニュー、すべて開いてしまうのを直したい！

Question

ドロップダウンメニュー、すべて開いてしまうのを直したい！

ECサイト用のサイドメニューの作っているのですが、
ドロップダウンですべての中身が表示されてしまいます。直したいです。よろしくお願い致します。

<div class="pc">
							<div class="sidebar">
								<p class="example1">商品カテゴリーから探す</p>
								<div class="wrap">
									<div class="title">
										ビューティ・コスメ<span class="icon"></span>
									</div>
									<p class="content"><a href="">お香</a></p>
									<p class="content"><a href="">シェービング</a></p>
									<p class="content"><a href="">スキンケア</a></p>
									<p class="content"><a href="">ネイル</a></p>
									<p class="content"><a href="">フレグランス雑貨</a></p>
								</div>

								<div class="wrap">
									<div class="title">
										ビューティ・コスメ<span class="icon"></span>
									</div>
									<p class="content"><a href="">お香</a></p>
									<p class="content"><a href="">シェービング</a></p>
									<p class="content"><a href="">スキンケア</a></p>
									<p class="content"><a href="">ネイル</a></p>
									<p class="content"><a href="">フレグランス雑貨</a></p>
								</div>

								<div class="wrap">
									<div class="title">
										ビューティ・コスメ<span class="icon"></span>
									</div>
									<p class="content"><a href="">お香</a></p>
									<p class="content"><a href="">シェービング</a></p>
									<p class="content"><a href="">スキンケア</a></p>
									<p class="content"><a href="">ネイル</a></p>
									<p class="content"><a href="">フレグランス雑貨</a></p>
								</div>

							</div>
						</div>

<script type="text/javascript">

$('.title').on('click',function(){
  $('.content').slideToggle('slow');
  $('.icon').toggleClass('hide');
});

</script>



.title {
    position: relative;
    cursor: pointer;
    font-weight: bold;
    color: #787878;
}

.title .icon {
    width: 28px;
    height: 28px;
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
}

.icon::before {
    width: 12px;
    height: 2px;
    top: 12px;
    left: 3px;
}

.icon::before, .icon::after {
    content: "";
    display: block;
    position: absolute;
    background: #787878;
}

.icon::after {
    width: 2px;
    height: 14px;
    top: 6px;
    left: 8px;
}

Answer 1

こんな感じで自分の要素を基準に探してみては？

$('.title').on('click',function(){
  $(this).parent().find('.content').slideToggle('slow');
  $(this).parent().find('.icon').toggleClass('hide');
});// 未テスト

Comments

[rola.716]

すごい！できました。本当にありがとうございます。