'I want to make the rows in this table collapsible/expandable

Find the code here, don't want to paste the entire thing... https://code.sololearn.com/W8odKz78WT07/#html

Or as an example, lets use this

<head>

</head>

<body>
    <table>
        <tr>
            <th></th>
            <th><img class="isaaccrm" src="http://isaacintelligence.com/wp-content/uploads/2017/04/ISAAC-logo-cropped.png"/></th>
            <th><img class="zoho" src="http://i.imgur.com/R8vz9iG.png"/></th>
            <th><img class="salesforce" src="http://i.imgur.com/UhUHB4P.png"/></th>
            <th><img class="infusionsoft" src="http://i.imgur.com/iGzEnUr.png"/> </th>
            <th><img class="sugarcrm" src="http://i.imgur.com/weilyrP.png"/></th>
        </tr>

        <tr>
            <th> <p class="comparisons">Operating Systems</p>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
                <td class="center">Web</td>
            </th>

        </tr>
            <th><p class="comparisons">Mobile compatibility</p>
                <td><img style="padding-left:20px" title="iOS and Android" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-1.png"></td>
                <td><img style="padding-left:30px" title="iOS, Android and Windows" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td>
                <td><img style="padding-left:30px" title="iOS, Android and Windows" src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td>
                <td><img style="padding-left:20px" title="iOS and Android"  src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-1.png"></td>
                <td><img style="padding-left:60px" title="iOS, Android and Windows"  src="http://isaacintelligence.com/wp-content/uploads/2017/04/New-iOS-and-Android-and-Windows-1.png"></td>
            </th>
        </tr>

CSS being applied:

.isaaccrm {
    float: left;
    height: 20px;
    width: 100px;
}

.zoho {
    height: 50px;
    width: 115px;
    padding-top: 10px;
    float: right;
    margin-right: 30px;

}

.salesforce {
    height: 60px;
    width: 90px;
    padding-top: 10px;
    padding-left: 20px;
}

.infusionsoft {
    height: 25px;
    width: 180px;
    padding-top: 5px;
}

.sugarcrm {
    height: 60px;
    width: 90px;
    padding-top: 10px;
    margin-right: 55px;
    float: right;
}

.comparisons {

    margin-top: 30px;
    margin-bottom: 30px;
    /* Make the comparison font into Lato*/

}

Is there any way I can make these rows collapsible, while showing the name of the Row (the <p> tag, so simply collapsing all of the <td>) still, while only using HTML/CSS? Or do I have to include JavaScript?

htmlcsshtml-tablecollapseexpand


Solution 1:[1]

You can achive this with input:checked, similar to this Collapse and expand elements with CSS

You have to place all the input tags before your table, then place label tags e.g. inside of each first cell in every row. you'll need id/for attributes on input and label tags.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community

Related Questions