Javascript 在listview中展开/显示和隐藏div元素

如您所见，这是一个列表视图，我的任务是当您单击一个元素/div时，然后单击带有图像的div展开/show。现在这很容易，即使对于后端开发人员，但我想： 1.当我再次单击同一元素时，该元素将隐藏。 2.当我单击另一个元素时，已经展开的元素将隐藏，而我单击的另一个元素将展开/显示。 我需要这个脚本和CSS请

<div class="row">
                @foreach(var post in CurrentPage.Children) 
                {
                    <div class="col-md-12">
                        <div class="content equal" onclick="showhide()">
                            <a href="@post.Url">
                                <div class="date">@post.CreateDate.ToLongDateString()</div>
                                <h2>@post.Name</h2>     
                                <p>@Umbraco.Truncate(post.Introduction, 240, true)</p>
                            </a>
                        </div>
                        <div class="images(-expand)">
                            <img src="@post.Image" />
                        </div>
                    </div>
                }
            </div>

@foreach（CurrentPage.Children中的var post）
{
}

尝试以下操作

$（'.content.equal'）。单击（函数（）{
$（'.content.equal'）。不是（this.next（）.slideUp（）；
$（this.next（）.slideToggle（）；
});
$（'.content.equal a'）。单击（函数（事件）{
event.preventDefault（）；
});
.images{
显示：无；
}
你的
showhide（）
现在在做什么？谢谢@Harish Kommuri，它似乎工作得很好。