折りたたみ機能の実装

この記事でわかること

• 特定の画像(文章)を折りたたみ、クリックすることで表示できる機能の実装手順

前提条件

• bootstrapが実装済みであること

完成デモ

よろしくお願いします！

実装手順

実装手順は以下を参考にしました。
https://bootstrap.hana87.club/collapse.html

<div class="panel-group">
 <div class="panel panel-default">
   <div class="panel-heading">
     <h4 class="panel-title">
       <a data-toggle="collapse" href="#collapse1">click me</a>
     </h4>
   </div>
   <div id="collapse1" class="panel-collapse collapse">
     <div class="panel-body">内容</div>
     <div class="panel-footer">フッター</div>
   </div>
 </div>
</div>

Bootstrapチュートリアル/折りたたみ/折りたたみパネル

実装方法

実走方法は2ステップで紹介させていただきます。

アンカーテキストとリンク先について

アンカーテキストとリンク先については引用から紹介します。

アンカーテキスト

アンカーテキストとは「リンクの内容を表すテキスト」のことです。実装手順からならば以下の箇所になります。

アンカーテキスト

<a data-toggle="collapse" href="#collapse1">click me</a>

• collapse・・・和訳すると「折りたたむ」と言う意味です。
• data-toggle="collapse"属性・・・<a>要素に追加
• href="#collapse1"・・・id属性を追加 (リンク先の <div id = collapse1>に接続できる)

リンク先

ここでのリンク先は「どの部分を折りたたむか」のことです。実装手順からならば以下の箇所になります。

リンク先

   <div id="collapse1" class="panel-collapse collapse">
     <div class="panel-body">内容</div>
     <div class="panel-footer">フッター</div>
   </div>

PFに反映させる

私の場合、投稿一覧をテーブル表示かつ部分テンプレートで実装しました。

_postitems.html.erb

 <% items.each do |item| %>
  <div class="table-responsive-sm">
   <table class="table text-nowrap table-bordered w-100">
      <tr class ="align-middle text-center">
         <th class="user_name">
          <%= image_tag item.user.get_profile_image(30,30), class: "rounded-circle" %><%= item.user.name %>さん
          <%= render 'layouts/user_certification', user: item.user %>
          </th>
+         <th class="head" colspan="5"> <a data-toggle="collapse" href="#collapse1" class= "text-secondary">▼</a>投稿画像
+	  <!-- date-toggle="collase"を<a>属性に追加 -->
+	  <!-- href ="#id"属性を追加 -->
         <% if item.user == current_user %>
           <%= link_to item_path(item), method: :delete do %>
            <i class="fa-solid fa-eraser"></i>削除
           <% end %>
         <% end %>
         </th>
       </tr>
+        <tr class="align-middle text-center td collapse" id="collapse1">
+          <td colspan="5"><%= image_tag item.product.get_image, size:'300x300' %></td>
+	  <!-- 追加した属性を反映させる -->
        </tr>
        <!-- 以下略 -->

何を<a>要素に追加して、どのようなid属性を設定したのかを意識して、反映させると上手く実装できました。

感想

制作フェーズでは引用を参考にして実装しましたが、理屈はあまり分かっていませんでした。この記事を通して「なぜこのような記述が必要なのか」が理解できて嬉しかったです。

この記事をかいた人

https://twitter.com/tya_dwc
23/6/1にDWCに入学し、主にRailsの学習に取り組みました。卒業が近づきこれから何で学習をするか悩んだときに、技術ブログをしようと考えました。初心者ですがよろしくお願いします。