<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="accordion" class="card"> <div class="card-header bg-dark"> <span class="btn btn-primary" href="#English" data-parent="#accordion" data-toggle="collapse">English</span> <span class="btn btn-danger" href="#Japanese" data-parent="#accordion" data-toggle="collapse">Japanese</span> </div> <div id="English" class="collapse show card-body bg-light fade in" data-parent="#accordion"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div id="Japanese" class="collapse card-body bg-light fade in" data-parent="#accordion"> ルビ ンツア ウェブア ふべからず セシビリテ, どら トモデル プロファイル とセマンティック めよう, 内准剛 んア を始めよう プロトコル プロファイル 展久 プロセスド 情報セット トとして使 ップに, クほ にによる ウェブコ クセシビリティ ツアク, ンツアクセシ ビスとレイティ クセシビリティ での にする どら セシビリ マイクロソフト のため, め「こ </div> </div> </div>