CODEWITHSUNDEEP
css
Steve Kim
Steve Kim

Reputation: 5591

Showing hidden content via css

So, to better explain, I am attaching a simple image of what I am trying to achieve.

enter image description here

There is a button, and three contents (two visible and one hidden located in between as shown above).

When the button is clicked, I want to show the hidden content which is located in between to contents.

Is it possible to achieve this with CSS alone?

For example, I can have the hidden content with display:none; then force it visible somehow?

I am not sure what the most efficient way to achieve this.

Any suggestions will be appreciated.

Thanks!

Upvotes: 1

Views: 181

Answers (4)

Majid Sadr
Majid Sadr

Reputation: 1071

.visible_content:hover > .hidden_content {display:block;}

when you hover on .visible_content , .hidden_content will be shown.

but with click , I don't think that there be any way to do this via css.

but in jquery , it is simple:

$(".visible_content").click(function(){
    $(".hidden_content").fadeIn();
});

Upvotes: 1

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

If you want to achieve this using CSS only then there is a way using check boxes or Radio buttons instead of HMTL button tag.

here is a demo https://jsfiddle.net/nileshmahaja/yt76h26n/

HTML

<input type="checkbox" class="check"/>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>

.box{
    height:50px;
    width:50px;
    background: gray;
    margin-bottom:20px
}

.two{
    display:none;
}

.check:checked ~ .two {
    display:block
}

And you can style checkbox or Radio button as per your convenience.

Upvotes: 2

Dmitriy
Dmitriy

Reputation: 4503

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.btn{
    display: inline-block;
    padding: 15px 45px;
    border: 2px solid #000;
    color: #000;
    text-decoration: none;
}

div{
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    margin: 25px auto;
}
.block-hidden{
    display: none;
    border: 2px solid #f00;
    color: #f00;
}

.btn:focus ~ .block-hidden{
    display: block;
}
<a href="#" class="btn">Button Click</a>

<div class="block">Block</div>
<div class="block block-hidden">Block Hidden</div>
<div class="block">Block</div>

Upvotes: 1

bkunzi01
bkunzi01

Reputation: 4561

Do it purely in css solution here: How to change an image on click using CSS alone?

However, with jquery it can easily be done in 3 seconds with only a couple of lines if you're not opposed to it as shown below!

$("#buttonsid button").click(function(){
    $("#idofhiddencontent").toggle();
});

Upvotes: 1

Related Questions