htmlcssjsfiddle

Collapse an element when expand another element only css

I have asp.net site. By some reason, I can't use javascript in my code. I use this code for create a expansible 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 an collapsed element, that element will be expanded and other element will be collapsed.

This project can use only CSS, no JavaScript so I have no solution to do it.

Solution

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

    This changes mean that there is just one input that can be checked in the same time. So, if you click to one item 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 need that the second click will close the tab again, you have to wrap all with form tag.