Using Target On Div Without A Href

I have created a row div with id'dashboard' in which i have 3 divs. And below this row i have created 3 rows with one div in each row. I want to click on one div in row div with id

Solution 1:

As in this JS Fiddle, this is a CSS only solution, just replace your div's with a's and making use of the :target it will work the way you want:

@charset"utf-8";

   /* CSS Document */
   * {
     box-sizing: border-box;
   }
   .row:after {
     content: "";
     clear: both;
     display: block;
   }
   [class*="col-"] {
     float: left;
     padding: 15px;
   }
   .col-1 {
     width: 8.33%;
   }
   .col-2 {
     width: 16.66%;
   }
   .col-3 {
     width: 25%;
   }
   .col-4 {
     width: 33.33%;
   }
   .col-5 {
     width: 41.66%;
   }
   .col-6 {
     width: 50%;
   }
   .col-7 {
     width: 58.33%;
   }
   .col-8 {
     width: 66.66%;
   }
   .col-9 {
     width: 75%;
   }
   .col-10 {
     width: 83.33%;
   }
   .col-11 {
     width: 91.66%;
   }
   .col-12 {
     width: 100%;
   }
   .show {
     display: none;
   }
   :target {
     display: block;
   }

<divid="dashboard"class="row"><ahref="#alarm"class="col-4"style="background-color:#009"></a><ahref="#calendar"class="col-4"style="background-color:#C00"></a><ahref="#weather"class="col-4"style="background-color:#0C0"></a></div><divid="alarm"class="row show"><divclass="col-12"style="background-color:#009"></div></div><divid="calendar"class="row show"><divclass="col-12"style="background-color:#C00"></div></div><divid="weather"class="row show"><divclass="col-12"style="background-color:#0C0"></div></div>

---

Update: Upon a request in the comment, now with adding an <a href="#dashboard"> in each one of the .show gadgets and performing the same :target trick we have this result JS Fiddle 2:

@charset"utf-8";

   /* CSS Document */
   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   .row:after {
     content: "";
     clear: both;
     display: block;
   }
   [class*="col-"] {
     float: left;
     padding: 15px;
   }
   .col-1 {
     width: 8.33%;
   }
   .col-2 {
     width: 16.66%;
   }
   .col-3 {
     width: 25%;
   }
   .col-4 {
     width: 33.33%;
   }
   .col-5 {
     width: 41.66%;
   }
   .col-6 {
     width: 50%;
   }
   .col-7 {
     width: 58.33%;
   }
   .col-8 {
     width: 66.66%;
   }
   .col-9 {
     width: 75%;
   }
   .col-10 {
     width: 83.33%;
   }
   .col-11 {
     width: 91.66%;
   }
   .col-12 {
     width: 100%;
   }
   .show {
     display: none;
     position: absolute;
     width: 100%;
     height: 400px;
     top: 0;
   }
   :target {
     display: block;
   }
   .back-btn {
     width: 60px;
     height: 40px;
     display: inline-block;
     z-index: 20;
     background-color: orange;
     position: absolute;
     padding-top: 10px;
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
     color: black;
   }

<divid="dashboard"class="row"><ahref="#alarm"class="col-4"style="background-color:#009"></a><ahref="#calendar"class="col-4"style="background-color:#C00"></a><ahref="#weather"class="col-4"style="background-color:#0C0"></a></div><divid="alarm"class="alarm row show"><ahref="#dashboard"class="back-btn">back</a><divclass="col-12"style="background-color:#009; height:300px;"></div></div><divid="calendar"class="row show"><ahref="#dashboard"class="back-btn">back</a><divclass="col-12"style="background-color:#C00; height:300px;"></div></div><divid="weather"class="row show"><ahref="#dashboard"class="back-btn">back</a><divclass="col-12"style="background-color:#0C0; height:300px;"></div></div>

** NOTE that I've added height:300px; to the inline style of the .show DIVs.

Solution 2:

Target isn't the correct way to do it anyway. Put an "onclick=" on the div, and write a Javascript function to handle the behavior.

    <div id="dashboard"class="row">

        <divclass="col-4"style="background-color:#009"onclick="myfunction('col4')"></div>
</div>

       functionmyfunction(whichColumn){
          //do some stuff with whichColumn
       }