css - How to make expand/collapse in bootstrap 3 stricly horizontal -


enter image description here

i'm using bootstrap 3. idea expand/collapse words between other words (transcriptions in dictionary) clicking on 1 button.

words , transcriptions between them have class display: "inline-block". it's there way make strictly horizontal transition, , avoid display:"block" part of it? panel heading should in 1 line. (and avoid write additional js)

        <div class="panel-heading">           <div class="note">{{note}} </div>           <div class="word -arabic-text-big">{{word}}</div>           <div class="collapse transcription">[******]</div>         </div>         <button type="button" class="btn btn-info"              data-toggle="collapse" data-target=".transcription">         transcipt         </button> 

sorry, answer simple. before did wrong...

    .note, .word, .transcription {     display: inline-block; }  .transcription.collapse.in {     display: inline-block; } .transcription.collapse {     display: none; } 

Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -