HTML5 сворачивается в нескольких контейнерах

Question

Я пытаюсь создать несколько контейнеров, и мне нужно, чтобы каждый из них мог сворачиваться и открываться при взаимодействии с пользователем.В настоящее время я могу только открыть, но когда я нажимаю на «Детали», div не закрываются.

Я попытался изменить коллапс, а также добавить идентификаторы и сделать целевой объект данных идентификатором, но все еще та же проблема

Ссылка: https://www.w3schools.com/code/tryit.asp?filename=G4OW7SFO0DYR

Answer 1

Пожалуйста, попробуйте это.

    <div class="card" id="card0" style="background-color: #c8c372; border:5px solid black;"><div class="description">
    <h4 style="font-size: 25px; text-align: center"><b> Bottled water | $2 </b></h4><h5 style="text-align: center"></h5>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <style>
    button{
    padding-left: 40%;
    padding-right: 45%;
    }
    </style>
    <div class="container">
      <button type="button" data-toggle="collapse" data-target="#demo">Details</button>
      <div id="demo" class="collapse multi-collapse">
        Brands of water include: Dasani, Nestle, and Fiji
      </div>
    </div>
    </div><span id="next-content0"></span></div>

    ---------------
    ------------------
    ------------

    <div class="card" id="card0" style="background-color: #c8c372; border:5px solid black;"><div class="description">
    <h4 style="font-size: 25px; text-align: center"><b> Bottled water | $2 </b></h4><h5 style="text-align: center"></h5>
    <div class="container_1">
      <button type="button" data-toggle="collapse" data-target="#demo_1">Details</button>
      <div id="demo_1" class="collapse multi-collapse">
        Brands of water include: Dasani, Nestle, and Fiji
      </div>
    </div>
    </div><span id="next-content0"></span></div>

Пожалуйста, добавьте свой CSS и JS в тег head.вам не нужно вызывать CSS и JS везде.