在列表視圖中展開/顯示和隱藏div元素

Question

正如你所看到的，這是一個列表視圖，我的任務是當你點擊一個元素/ div然後div與圖像展開/顯示。現在很簡單，即使是後端開發者，但我想： 1.當我再次點擊相同的元素時，元素將隱藏。 2.當我點擊另一個元素時，已經展開的元素將會隱藏，而我點擊的另一個元素將展開/顯示。 我需要這個Script和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> 

Answer 1

請嘗試以下操作。

$('.content.equal').click(function() { 
 
    $('.content.equal').not(this).next().slideUp(); 
 
    $(this).next().slideToggle(); 
 
}); 
 

 
$('.content.equal a').click(function(event) { 
 
    event.preventDefault(); 
 
});

.images { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div class="content equal"> 
 
    <a href="@post.Url"> 
 
     <div class="date">12-01-2017</div> 
 
     <h2>Name1</h2> 
 
     <p>@Umbraco.Truncate(post.Introduction, 240, true)</p> 
 
    </a> 
 
    </div> 
 
    <div class="images"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" /> 
 
    </div> 
 
</div> 
 
<div class="col-md-12"> 
 
    <div class="content equal"> 
 
    <a href="@post.Url"> 
 
     <div class="date">12-01-2017</div> 
 
     <h2>Name1</h2> 
 
     <p>@Umbraco.Truncate(post.Introduction, 240, true)</p> 
 
    </a> 
 
    </div> 
 
    <div class="images"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" /> 
 
    </div> 
 
</div> 
 
<div class="col-md-12"> 
 
    <div class="content equal"> 
 
    <a href="@post.Url"> 
 
     <div class="date">12-01-2017</div> 
 
     <h2>Name1</h2> 
 
     <p>@Umbraco.Truncate(post.Introduction, 240, true)</p> 
 
    </a> 
 
    </div> 
 
    <div class="images"> 
 
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" /> 
 
    </div> 
 
</div>