異なるdivボックスのボタンクリックで表示するリストがあります

Question

4つのdivボックスには内容が異なりますが、同じサイズです。これらのボックスの下にはボタンがあり、ボタンをクリックすると、すべてのdivボックスに4つの異なるリストの内容が表示されます。

これはかなり正直な問題のようですが、どこが間違っているのかわかりません。ここで

は、これら4つのdivボックスのいずれかである：ここで

<div class="boxes"> 
    <div class="col span-1-of-4 box box1"> 
     <h6>Summer Saver</h6> 
     <h2><i class="ion-social-euro"></i>1595</h2> 
     <p>Save <i class="ion-social-euro"></i>300</p> 
     <h5>Until August 31</h5> 
     <div class="content"> 
      <ul> 
       <li> 
        <p>Lorem Ipsum</p> 
       </li> 
       <li> 
        <p>Lorem Ipsum</p> 
       </li> 
       <li> 
        <p>Lorem Ipsum</p> 
       </li> 
       <li> 
        <p>Lorem Ipsum</p> 
       </li> 
      </ul> 
     </div> 
     <div class="book-now"> 
      Book Now 
     </div> 
    </div> 
</div> 

はボタンです：現状では

$(document).ready(function() { 
    $("#btnExpand").click(function() { 
     $(".content").show(); 
    }); 
    $("#btnExpand").click(function() { 
     $(".content").hide(); 
    }); 
}); 

：ここ

<button id="btnExpand" onclick="buttonText()"> Compare Benefits</button> 

は私のjavascriptファイルですべてですこれは関連性のあるボックスの唯一のCSSです：

.boxes .content ul li { 
    list-style: none; 
    display: none; 
} 

私は、現在表示されていないリストアイテムを持っていますが、ボタンをクリックすると表示されるdivがアクティブになり、再度クリックすると再び非表示になります。

Answer 1

主な問題は、cssではすべての単一のリストアイテムを隠しているが、コンテナを表示しているということです。

look at this fiddleがあります。あなたの答えが見つかります。

$(document).ready(function() { 
    $("#btnExpand").on('click', function() { 
    if ($(".boxes .content").is(':visible')) { 
     $(".boxes .content").hide(); 
    } else { 
     $(".boxes .content").show(); 
    } 
    }); 
}); 

また、それらの

.boxes .content { 
    display: none; 
}