Like SystemiConnectFri 15 Oct 2021, 04:50
Auto Save MessagesLGforumFri 26 Feb 2021, 13:31
New tutorial questionTheCrowMon 15 Feb 2021, 08:12
Support iOS Emojis (and other platforms)LGforumSun 14 Feb 2021, 01:25
LGforum (2806)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
Mr.Easybb (1587)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
Bloodbath (745)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
Rukiafan (533)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
Dom (513)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
puppycheese (446)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
pedro (330)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
Neymar (301)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
Hitsu (281)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 
Flora (275)
LGBB - Toggling just using CSS Vote_lcapLGBB - Toggling just using CSS Voting_barLGBB - Toggling just using CSS Vote_rcap 


Toggling just using CSS

LGforumLGforum
Status : Working to restore AWC!

Posts : 2806
Join date : 2011-10-05
Age : 30
Location : UK
Mon 02 May 2016, 09:32
I thought I'd share an interesting mini CSS tip I came across a while back and that's using CSS toggle elements.

Its common belief that Javascript must be used in order to toggle an element, however if your toggle is on mouseover, or focus/blur of an output you can actually create toggle using just CSS.

Consider the following HTML:
Code:
[panda=html]<div id="option">Hover over me</div>
<div id="popup">This box will show on hover of #option</div>

Then using this CSS, will make the #popup box show when hovering over the #option box:
Code:
[panda=css]#popup { display: none }
#option:hover + #popup { display: block }

It is using this effect that I made the tooltip bbcode on this forum using LGBB. Hover over this: [tip]This tip is shown using CSS[/tip]


You can actually use this effect to create some fancy menu's. Here's a nice accordion style menu for you to play with.

The HTML
Code:
[panda=html]<div id="LGaccordion">
  <span class="option">Option 1</span>
  <span class="sub_options">
    <ul>
      <li>Sub option 1</li>
      <li>Sub option 2</li>
      <li>Sub option 3</li>
    </ul>
  </span>
 
  <span class="option">Option 1</span>
  <span class="sub_options">
    <ul>
      <li>Sub option 1</li>
      <li>Sub option 2</li>
      <li>Sub option 3</li>
    </ul>
  </span>
 
  <span class="option">Option 1</span>
  <span class="sub_options">
    <ul>
      <li>Sub option 1</li>
      <li>Sub option 2</li>
      <li>Sub option 3</li>
    </ul>
  </span>
</div>

Code:
[panda=css]#LGaccordion {
   width: 250px;
   border: 1px solid #666;
   -webkit-box-shadow: 0 0 5px #ccc;
   -moz-box-shadow: 0 0 5px #ccc;
   box-shadow: 0 0 5px #ccc;
   padding: 0 1px;
}
#LGaccordion .sub_options { display: none }
#LGaccordion .option {
   display: block;
   color: black;
   background: #ccc;
   border-bottom: 1px solid;
   border-top: 1px solid #fff;
}
#LGaccordion .option:hover + .sub_options {
   display: block!important;
}

Hope it helps you get rid of some un-needed Javascript in your page! Smile

#LGBB #tips