Program Resource

開発者向け各種コード、アルゴリズム、リソース情報ライブラリ もしくはねふぁの覚え書き

Laravel/vueのちょっとした事の覚え書き。Laravel 8.xで作業した際の情報。

折畳み表示の簡単な例

<span>
 <div class="btn text-green-500"
      data-toggle="collapse"
      aria-expanded="false"
      data-target="#text_sample"
      aria-controls="text_sample">折畳み▼</div>
  <div class="collapse whitespace-pre text-left float-right" id="text_sample">
ここに折りたたみたいテキストを記述
  </div>
  </span>        

ボタンを押すと折畳み切替と、ブラウザに折畳み状態を保存させる例。

//html
<button
   data-toggle="collapse"
   @click="saveCollapseState('testlist' + item.id, $event)"
   v-bind:aria-expanded="getCollapseState('testlist' + item.id)"
   v-bind:data-target="'#testlist' + item.id"
   v-bind:aria-controls="'testlist' + item.id"
>
<div
   class="card-body m-2 collapse"
   v-bind:id="'testlist' + item.id"
   :class="[getCollapseState('testlist' + item.id) ? 'show' : '']"
>

//スクリプト
getCollapseState(blockid){
      if (localStorage.getItem(blockid) === null || localStorage.getItem(blockid)=='true')
        return true;
      return false;
},
saveCollapseState(blockid, event){
    //初回falseだと何故かnullになる
    //反転して保存
    if (event.currentTarget.getAttribute('aria-expanded') === null || event.currentTarget.getAttribute('aria-expanded')=='false')
        localStorage.setItem(blockid, true);
    else
        localStorage.setItem(blockid, false);
},
Print Friendly, PDF & Email