CODEWITHSUNDEEP
htmlcsstoggle
Tamras Merin
Tamras Merin

Reputation: 159

Show/Hide contents by clicking an icon using CSS (no javascript)

Is it possible to use something similar to toggle on/off or show/hide but rather than using panels or accordion menu, use icon-blocks instead?

There are 4 icons arranged in a row, clicking each icon should display the contents below the icon row, but only one content should be displayed at any given time.

I'm looking for CSS/HTML solution only - no javascript.

Icons are arranged in a row, using grid

<!--display icons in a row, 4 columns-->
<div class="quarter">   
    <span class="icon1"></span>
</div>

Below the 4th 'quarter' div is where the contents should be displayed.

Edit: Final Code I replaced the position: absolute with float to display all the text below the icons. 

.iconBlock{
    display: inline-block;  
    margin: 20px;
    padding: 0px 40px 15px 40px;
    cursor: pointer;
    outline: none !important;
    }

.iconBlock a{
    font-size: 40px;
    color: #000;
    }

.contentBlock {
    display: none;
    height: auto !important;
    opacity: 0;
    }

.iconBlock:hover a{
     color: #444;
    }

.iconBlock:focus a{
    color: #ff4455;
    }

.iconBlock:focus + .contentBlock{
    opacity: 1;
    display: block;
    float: left;
    top: 0;
    left: 0;
    }

Upvotes: 1

Views: 4883

Answers (1)

Tim S.
Tim S.

Reputation: 162

I'd recommend using javascript. But here's how to do it without js:

.icon{
  display: inline-block;
  margin: 20px;
  cursor: pointer;
  outline: none;
}

.icon i{
  font-size: 40px;
  color: #000;
}

.content{
  position: absolute;
  opacity: 0;
}

.icon:hover i{
  color: #444;
}

.icon:focus i{
  color: #ff4455;
}

.icon:focus + .content{
  opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="quarter">   
    <a href="#" class="icon"><i class="fa fa-cog"></i></a>
    <div class="content">Content for icon 1</div>
    
    <a href="#" class="icon"><i class="fa fa-trash"></i></a>
    <div class="content">Content for icon 2</div>
    
    <a href="#" class="icon"><i class="fa fa-pencil"></i></a>
    <div class="content">Content for icon 3</div>
    
    <a href="#" class="icon"><i class="fa fa-user"></i></a>
    <div class="content">Content for icon 4</div>
</div>

Upvotes: 1

Related Questions