Toggle div and up-down arrow heads using css only - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Arrow

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Arrow

Description

Toggle div and up-down arrow heads using css only

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.label {<!-- ww w.  j ava2  s. co m-->
   font-size: 29px;
}
.toggle-inbox {
   display: none;
}
.less {
   cursor: pointer;
}
.toggle-inbox ~ div#my {
   display: none;
   margin-bottom: 10px;
   clear: both;
}
.toggle-inbox:checked ~ div#my {
   display: block;
}
.label::after {
   background-color: white;
   border-right: 3px solid black;
   border-bottom: 3px solid black;
   width: 10px;
   display: inline-block;
   height: 10px;
   transform: rotate(45deg);
   -webkit-transform: scale(1) rotate(45deg) translate(0px, 0px);
   -moz-transform: rotate(45deg) scale(1.0);
   -o-transform: rotate(45deg) scale(1.0);
   margin-top: 10px;
   content: "";
   margin-left: 5px;
}
.toggle-inbox:checked ~.label::after {
   border-right: 3px solid black;
   border-bottom: 3px solid black;
   transform: rotate(-135deg);
   -webkit-transform: scale(1) rotate(-135deg) translate(0px, 0px);
   -moz-transform: rotate(-135deg) scale(1.0);
   -o-transform: rotate(-135deg) scale(1.0);
}


      </style> 
 </head> 
 <body translate="no"> 
  <input class="toggle-inbox" id="_1" type="checkbox"> 
  <label class="label" for="_1">this is a test</label> 
  <div id="my">
    this is a test this is a test
   <label href="#clear" class="less" for="_1"> <span id="less" style="color:darkorange;" class="arrow-less">Less</span> </label> 
  </div>  
 </body>
</html>

Related Tutorials