Accordion table in single row

Asked

Viewed 268 times

1

I’m working on an Rails app. I’m currently working on the front end. I have a table of how it behaves on large screens.

|Tabela atual

but when reducing the screen (cell phone size) I would like it to be in acordion style with dropdown only skin thead Name.

All other fields ("email, phone, origin, status and code") would be hidden and only show when the user clicked on the Name he wanted, then would dropdown the rest of the information, showing one below the other.

Does anyone know how to do it? I know almost nothing about JS, and I think I will have to do a good part in it right...

ruby-on-rails bootstrap-4

  • In fact it doesn’t need JS, you can have a "hidden" dropdown that only appears when the screen is small. So at the same time you show the Dropdown on small screens you can also hide the table on those screens. All with @media and CSS, if you want I put together a simple example for you.

  • If it is possible to assemble the example I would appreciate! Thank you

  • I posted an example, it just switches the display values in CSS when the screen is smaller. For you to test copy the code in your project and do a test decreasing and increasing the Browser window

1 answer

1

As said in the comment I only used @media only screen and (max-width: 576px) who is the smallest breacking point Bootstrap official to set display in the table and in the Collapse. So, when the screen is less than 576px I hide the table and show the Collapse, and when I go I hide the Collapse and show the table.

See below the example: (you need to put the screen at 576px to see change the table by ok Collapse)

#accordion {
    display: none;
}
.table {
    display: table;
}
@media only screen and (max-width: 576px) {
    #accordion {
    display: block;
    }
    .table {
        display: none;
    }
}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
    
<table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
        </tr>
        <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
        </tr>
        <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
        </tr>
    </tbody>
</table>

<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                First
            </button>
        </h5>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
            <ul>
                <li>Mark</li>
                <li>Otto</li>
                <li>@mdo</li>
            </ul>
        </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Last
            </button>
        </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
            <ul>
                <li>Jacob</li>
                <li>Thornton</li>
                <li>@fat</li>
            </ul>
        </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
        <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Handle
            </button>
        </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
        <div class="card-body">
            <ul>
                <li>Larry</li>
                <li>the Bird</li>
                <li>@twitter</li>
            </ul>
        </div>
        </div>
    </div>
</div>

OBS: I used sample code taker directly from Official Documentation

Browser other questions tagged ruby-on-rails bootstrap-4

You are not signed in. Login or sign up in order to post.