All geek questions in one place

Collapse element when expanding only one css element

I have an asp.net website. For some reason, I cannot use javascript in my code. I use this code to create an extensible table:

html, body, form { margin: 0 auto; padding: 0; text-align: left; height: 100%; top: 0; bottom: 0; overflow: hidden; } tr:nth-child(even) { background: #F5F5F5; } tr:nth-child(odd) { background: #DCDCDC; } tr:hover { background-color: #D3D3D3; } .toggle-box { display: none; } .toggle-box + label { cursor: pointer; display: block; font-weight: bold; line-height: 25px; margin-bottom: 2px; margin-left: 5px; background-color: #F1F8FF; border-bottom: 1px solid gray; } .toggle-box + label:hover { background-color: #C5ECFF; } .toggle-box + label + div { display: none; margin-bottom: 10px; margin-left: 20px; } .toggle-box:checked + label + div { display: block; } .toggle-box + label:before { background-color: #66AEFF; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; color: #FFFFFF; content: "+"; display: block; float: left; font-weight: bold; height: 25px; line-height: 25px; margin-right: 5px; text-align: center; width: 25px; } .toggle-box:checked + label:before { content: "\2212"; } #matru { border: 0; text-align: left; position: absolute; top: 100px; left: 300px; } 
 <div runat="server" id="sidebar" style="padding: 5px 0 0 5px;"> <input class='toggle-box' id='header1' type='checkbox' /><label for='header1'>Nguyễn Văn Tư</label><div> <table style='text-align: left; width: 100%; vertical-align: middle;'> <tr> <td>Tên khách hàng</td> <td>Nguyễn Văn Tư</td> </tr> <tr> <td>Mã khách hàng</td> <td>PC06LL0191387</td> </tr> <tr> <td>Sery công tơ</td> <td>14138734</td> </tr> <tr> <td>Chỉ số cũ</td> <td>194.000</td> </tr> <tr> <td>Chỉ số mới</td> <td>196.60</td> </tr> <tr> <td>Sản lượng mới</td> <td>2</td> </tr> </table> </div> <input class='toggle-box' id='header2' type='checkbox' /><label for='header2'>ĐInh Thị Tha</label><div> <table style='text-align: left; width: 100%; vertical-align: middle;'> <tr> <td>Tên khách hàng</td> <td>ĐInh Thị Tha</td> </tr> <tr> <td>Mã khách hàng</td> <td>PC06LL0182038</td> </tr> <tr> <td>Sery công tơ</td> <td>14140069</td> </tr> <tr> <td>Chỉ số cũ</td> <td>2050.000</td> </tr> <tr> <td>Chỉ số mới</td> <td>2104.10</td> </tr> <tr> <td>Sản lượng mới</td> <td>54</td> </tr> </table> </div> <input class='toggle-box' id='header3' type='checkbox' /><label for='header3'>Nguyễn Văn Nhựt</label><div> <table style='text-align: left; width: 100%; vertical-align: middle;'> <tr> <td>Tên khách hàng</td> <td>Nguyễn Văn Nhựt</td> </tr> <tr> <td>Mã khách hàng</td> <td>PC06LL0190775</td> </tr> <tr> <td>Sery công tơ</td> <td>14138746</td> </tr> <tr> <td>Chỉ số cũ</td> <td>2699.000</td> </tr> <tr> <td>Chỉ số mới</td> <td>2785.10</td> </tr> <tr> <td>Sản lượng mới</td> <td>86</td> </tr> </table> </div> <input class='toggle-box' id='header4' type='checkbox' /><label for='header4'>Mai Văn Lý</label><div> <table style='text-align: left; width: 100%; vertical-align: middle;'> <tr> <td>Tên khách hàng</td> <td>Mai Văn Lý</td> </tr> <tr> <td>Mã khách hàng</td> <td>PC06LL0182035</td> </tr> <tr> <td>Sery công tơ</td> <td>14138744</td> </tr> <tr> <td>Chỉ số cũ</td> <td>2581.000</td> </tr> <tr> <td>Chỉ số mới</td> <td>2631.70</td> </tr> <tr> <td>Sản lượng mới</td> <td>50</td> </tr> </table> </div> </div>

Full code here: https://jsfiddle.net/pdhung197/3eomjp3m/
But I want more: when I click on a collapsed item, that item will expand and the other item will be collapsed.
This project can only use CSS , JavaScript , so I have no solution for this.

+5
source share
1 answer

The trick is simple. Just replace the input from checkbox with radio and add the name attribute with the same value in all inputs .

These changes mean that there is only one input that can be checked at the same time. So, if you click on one element, all the rest will be closed.

 html, body, form { margin: 0 auto; padding: 0; text-align: left; height: 100%; top: 0; bottom: 0; overflow: hidden; } tr:nth-child(even) { background: #F5F5F5; } tr:nth-child(odd) { background: #DCDCDC; } tr:hover { background-color: #D3D3D3; } .toggle-box { display: none; } [type="reset"] { border: 0; width: 100%; text-align: inherit; padding: 0; font: inherit; margin: 0; outline:0 !important; } .toggle-box + label, [type="reset"]{ cursor: pointer; display: block; font-weight: bold; line-height: 25px; margin-bottom: 2px; margin-left: 5px; background-color: #F1F8FF; border-bottom: 1px solid gray; } .toggle-box + label:hover { background-color: #C5ECFF; } .toggle-box + label + button { display:none; } .toggle-box:checked + label { display:none; } .toggle-box:checked + label + button { display:block; } .toggle-box + label + button + div { display: none; margin-bottom: 10px; margin-left: 20px; } .toggle-box:checked + label + button + div { display: block; } .toggle-box + label:before, [type="reset"]:before{ background-color: #66AEFF; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; color: #FFFFFF; content: "+"; display: block; float: left; font-weight: bold; height: 25px; line-height: 25px; margin-right: 5px; text-align: center; width: 25px; } .toggle-box:checked + label:before { content: "\2212"; } #matru { border: 0; text-align: left; position: absolute; top: 100px; left: 300px; } 
 <form> <div runat="server" id="sidebar" style="padding: 5px 0 0 5px;"> <input class='toggle-box' id='header1' type="radio" name="radio" /><label for='header1'>Nguyễn Văn Tư</label> <button type="reset">Nguyễn Văn Tư</button> <div> <table style='text-align: left; width: 100%; vertical-align: middle;'> <tr> <td>Tên khách hàng</td> <td>Nguyễn Văn Tư</td> </tr> <tr> <td>Mã khách hàng</td> <td>PC06LL0191387</td> </tr> <tr> <td>Sery công tơ</td> <td>14138734</td> </tr> <tr> <td>Chỉ số cũ</td> <td>194.000</td> </tr> <tr> <td>Chỉ số mới</td> <td>196.60</td> </tr> <tr> <td>Sản lượng mới</td> <td>2</td> </tr> </table> </div> <input class='toggle-box' id='header2' type='radio' name="radio" /><label for='header2'>ĐInh Thị Tha</label> <button type="reset">ĐInh Thị Tha</button> <div> <table style='text-align: left; width: 100%; vertical-align: middle;'> <tr> <td>Tên khách hàng</td> <td>ĐInh Thị Tha</td> </tr> <tr> <td>Mã khách hàng</td> <td>PC06LL0182038</td> </tr> <tr> <td>Sery công tơ</td> <td>14140069</td> </tr> <tr> <td>Chỉ số cũ</td> <td>2050.000</td> </tr> <tr> <td>Chỉ số mới</td> <td>2104.10</td> </tr> <tr> <td>Sản lượng mới</td> <td>54</td> </tr> </table> </div> <input class='toggle-box' id='header3' type='radio' name="radio" /><label for='header3'>Nguyễn Văn Nhựt</label> <button type="reset">Nguyễn Văn Nhựt</button> <div> <table style='text-align: left; width: 100%; vertical-align: middle;'> <tr> <td>Tên khách hàng</td> <td>Nguyễn Văn Nhựt</td> </tr> <tr> <td>Mã khách hàng</td> <td>PC06LL0190775</td> </tr> <tr> <td>Sery công tơ</td> <td>14138746</td> </tr> <tr> <td>Chỉ số cũ</td> <td>2699.000</td> </tr> <tr> <td>Chỉ số mới</td> <td>2785.10</td> </tr> <tr> <td>Sản lượng mới</td> <td>86</td> </tr> </table> </div> <input class='toggle-box' id='header4' type='radio' name="radio" /><label for='header4'>Mai Văn Lý</label> <button type="reset">Mai Văn Lý</button> <div> <table style='text-align: left; width: 100%; vertical-align: middle;'> <tr> <td>Tên khách hàng</td> <td>Mai Văn Lý</td> </tr> <tr> <td>Mã khách hàng</td> <td>PC06LL0182035</td> </tr> <tr> <td>Sery công tơ</td> <td>14138744</td> </tr> <tr> <td>Chỉ số cũ</td> <td>2581.000</td> </tr> <tr> <td>Chỉ số mới</td> <td>2631.70</td> </tr> <tr> <td>Sản lượng mới</td> <td>50</td> </tr> </table> </div> </div> </form>

http://jsbin.com/pefobi

Note. If you want the second click to close the tab again, you must wrap everything with the form tag.

+4
source

Source: https://habr.com/ru/post/1239472/

More articles:


All Articles