質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

input-group の中で横にスライドするアコーディオン

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 4,869
退会済みユーザー

退会済みユーザー

bootstrap4 で input−group の中で横にアコーディオンしたいのですがどうすればいいでしょうか

<div class="accordion">
  <div class="input-group">
    <button></button>
  </div>
</div>

の状態から

<div class="accordion">
  <div class="input-group">
    <div class="input-group-prepend">
      <button>○</button>
    </div>
    <input type="text" class="form-control form-control-sm">
    <input type="text" class="form-control form-control-sm">
    <div class="input-group-append">
      <button>×</button>
    </div>
  </div>
</div>

の状態に横にひろがるようにしたいです

横にスライドさせるアニメーションは bootstrap のクラスをつけるだけでは無理でしょうか?

あと input-group でなければアニメーション以外はできそうなのですが
input-group の中だと余分な div をつけるとすぐデザインが崩れるのでなかなかうまくいきません

自分で <input type="checkbox" class="d-none" id="acc"> をつけて 
CSS で 

.acc:checked + .acc_body {
  display: block;
}


みたいなことをしようとしても input-group のなかにラベルを入れるとデザインが崩れます

いろいろ試行錯誤しているんですがなかなかうまくいかないので助けていただけるとありがたいです

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • liveasnotes

    2018/08/31 23:08

    HTMLが表すのは文書構造でありビジュアルではないので,HTMLだけみせられても,どのようにしたいのか分かりません.CSSも少しだけ載せられていますが,該当部分のHTMLがないため状況はを把握できません.それから,checkboxタグなど存在しないので修正してください(<input type="checkbox">ならある)

    キャンセル

  • liveasnotes

    2018/08/31 23:09

    どんなコードを書けばよいのかまったくわからないなら,せめてイラストだけでも載せてください.完成予想図が見えない状態ではコードは書けないので

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/09/02 00:39 編集

    input-group は https://cccabinet.jpn.org/bootstrap4/components/input-group にあるようなつながったフォームを作るクラスで 最初は小さなボタン1個(4つ角ともまるい)の状態からクリックすると右にのびて複数の入力欄が出現するというものを作りたいです(入力欄は質問では input x 2 + アイコンボタン にしてますがもっといろいろ入ります)

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/09/02 00:45

    checkbox は修正しました すいませんHTMLの生成自体はRailsのヘルパーを使ってるのでHTMLに関しては不正確なところがあるかもです

    キャンセル

回答 1

checkベストアンサー

+1

要素の動きがいまいちわからないので,とりあえずボタンの実装だけ
(リンク先ページ右上の「リミックス」ボタンからソースの閲覧・編集ができます)
https://thimbleprojects.org/liveasnotes/537081/
イメージ説明
(※上のデモは下のデモに書き換えられました/20180904)
イメージ説明


もしかしたら参考になるかもしれないので,他で書いたものですが置いときます
元投稿

https://thimbleprojects.org/liveasnotes/536993/
イメージ説明


書き加えて良いなら,

<!--書き加えた方-->
<div class="input-group mb-3">
  <input type="checkbox" id="form_elm_1" dn>
  <label for="form_elm_1">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">@</span>
    </div>
  </label>
  <div class="form_elm_wrapper">
    <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
  </div>
</div>

<!--書き加えてない方-->
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
.form_elm_wrapper{
  width: 0;
  overflow: hidden;
  transition: .5s;
}
input[id^="form_elm"]:checked ~.form_elm_wrapper{
  width: calc(100% - 2.6em);
}


イメージ説明
こんな感じでしょうか?


追記
書き忘れてましたが,<input><label>は離れてても良い(親子関係・兄弟関係は気にしなくて良い)みたいなので(仕様を読んだわけではないので実務で使うなら要確認),こういう入れ替えももちろんありです

あと,勝手に追加してるdn属性は属性セレクタでこういう指定をしています

[dn]{
  display: none;
}
<div class="input-group mb-3">
  <label for="form_elm_1">
    <!--略-->
  </label>
  <input type="checkbox" id="form_elm_1" dn><!--入れ替えた-->
  <div class="form_elm_wrapper">
    <!--略-->
  </div>
</div>
/* "~"(間接セレクタ)を"+"(隣接セレクタ)に書き換え */
input[id^="form_elm"]:checked +.form_elm_wrapper{
  width: calc(100% - 2.6em);
}

意外と大したことはしてないですし,height:auto;width:auto;にアニメーションが効かないところを考えると,見栄えを考慮するならもうひと工夫いるかもしれないですね

/*イメージ:wrapperの中にcontentsがある*/
#wrapper{
  width: 0;
  overflow: hidden;
  transition: .5s .1s;/*!*/
}
#contents{
  opacity: 0;
  transition: .1s;/*!*/
}
#btn:checked +#wrapper{
  width: 100px;
  transition: .5s;
}
#btn:checked +#wrapper #contents{
  opacity: 1;
  transition: .1s .5s;
}

追記(20180905)
完全ではないですが,それっぽいものが出来たので通知しときます(デモページも更新しました)
HTMLの手直しも簡素になりました
イメージ説明
border-radiusはオリジナルのままにしました.

上下幅がずれる現象は,気が向いたら調べます

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/04 01:05

    せっかく作ってくださったんですけど 下にでるんじゃなく
    たとえば作っていただいた一番上の入力フォームだと
    [ @ ] の状態から@ をクリックすると [ @ ][ input ] というふうに横にのびて input が出現するみたいな感じにしたかったのです
    下に(ボタンの外部に)出すのであれば <div class="collapse" id="..."> の中にいれるだけでどんなコンテンツでもだせるんですが
    トリガー自身が input-group の中に入ってるのでなかなかうまくいかずに困ってます

    キャンセル

  • 2018/09/04 14:31

    わー これです! ありがとうございます
    今ちょっと別件をやっててコードを読めないのですが
    時間があるときにゆっくりよませていただきます

    とりあえずベストアンサーにさせていただきますね

    キャンセル

  • 2018/09/04 19:25 編集

    んー 中身が1こだとうまくいくんですけど
    質問文のように右側の出現する入力欄を複数にすると縦にならんじゃうみたいですね

    あと回答のデモもよく見ると入力欄の角もまるくなっちゃってるので
    本来 input-group は両端のみ丸くなるように自動で border の rounded を管理してくれるみたいですけど
    input-group が有効なのは 直下にある場合だけで form_elm_wrapper で囲んでる孫にはきいてないみたいですね
    IDを中身それぞれにつけて wapper でかこまずに + じゃなく ~ で選択しても padding や border がのこってうまく隠れないし…
    input-group が間にコンテナー div をはさめないのが使いにくすぎてもうあきらめるしかないかなと

    せっかく何度も作っていただいたのに申し訳ないです

    キャンセル

  • 2018/09/06 00:29

    何度もありがとうございます
    オリジナルのスタイルと同じ状態のボタンを absoluteで重ねる感じなのですね

    ただあとでテーマやテンプレートをあてたり文字サイズ変更ボタンをつける可能性が高いので
    bootstrapのクラスを使わないと拡張性が…

    でもボタン1個の状態を bootstrap のクラスで作れればいけそうですね
    自分でも時間ができたらまたさわってみます
    ほんとにありがとうございます

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る