Accordion table in single row

Question

Accordion table in single row

Navigation

#1 by (1 votes)

1

I'm working on a rails app. At the moment I'm messing with the front end. I have a table of how it behaves on large screens.

However,whenyoureducethescreen(cellsize)youwouldlikeittostayintheacordionstylewithdropdownonlytheadskinname.

Allotherfields("email, phone, source, status and code") would be hidden and would only show when the user clicked on the Name he wanted, hence a dropdown in the rest of the information, showing one underneath the other.

Does anyone know how to do it? I do not know almost anything about JS, and I think you'll have to do a lot of it right ...

ruby-on-rails bootstrap-4

asked by anonymous 26.03.2018 / 21:32

1 answer

VBA - Error: The 'frames' method of the 'JScriptTypeInfo' object failed checkbox filled with database data in php

score 1 · Answer 1

As I said in the comment, I used only @media only screen and (max-width: 576px) which is the lowest% of Bootstrap's official% to set breacking point in the table and collapse. So, when the screen is smaller than 576px I hide the table and show the collapse, and when it is mair I hide the collapse and show the table.

#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><scriptsrc="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><scriptsrc="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 exiting code examples directly from the official Documentation