0
Bootrap 4には拡張可能なリストがありますが、他のアイテムは展開されても折りたたまれません。私は何かを見逃したり、リストグループでは不可能でした。カードを使用しているshownの例は正常に動作します。Boostrapで展開可能なリスト4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Lorem Ipsum</title><!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div id="container">
<div id="accordion" role="tablist" aria-multiselectable="false">
<ul class="list-group">
<li role="tab" class="list-group-item" id="heading0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="false" aria-controls="collapse0" class="collapsed">1. List Group Item</a>
<div id="collapse0" class="collapse" role="tabpanel" aria-labelledby="heading0">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p>
</div>
</li>
<li role="tab" class="list-group-item" id="headingOne">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="collapsed">2. List Group Item</a>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p>
</div>
</li>
<li class="list-group-item" role="tab" id="headingTwo">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed">3. List Group Item</a>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar lorem quam, at commodo lorem dapibus sit amet. Etiam luctus varius lacus, eget rutrum massa egestas lacinia. Integer quis odio quis magna congue placerat. Cras sed venenatis orci. In velit quam, faucibus ac pharetra a, condimentum sed mi. Mauris nec sapien tincidunt, elementum lacus eget, auctor diam. Nunc vel posuere purus. Nullam accumsan non dolor nec congue. Nulla sagittis volutpat aliquam. </p>
</div>
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
こんにちは、[MCVE]を提供してください。このコードスニペットにはブートストラップはありません。 – TylerH
申し訳ありません、ちょっとです。 – Himanshu
Bootstrap 4s Betaリリースと、 'collapse'のアコーディオン効果に特有のコードを試してみましたか：https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example –