activate display block article by class value when input radio activate? - html

Question

My HTML :
<div id="contentapp">
<input type="radio" name="menu" id="interest" checked>
<input type="radio" name="menu" id="about">
<div id="tab">
<label for="interest">Interest</label>
<label for="about">About</label>
</div>
<div id="content">
<article class="interest">
Interest
</article>
<article class="about">
About
</article>
</div>
</div>
My CSS :
#contentapp article {
display: none;
}
#contentapp input#interest:checked ~ article.interest{
display: block;
}
this is my problem . . . : how to do it in correct way for activate display block when radio button clicked ?

Answer 1

You have a div between contentapp and article. This means, you should use it in your css as well
#contentapp div article {
display: none;
}
#contentapp input#interest:checked ~ div article.interest{
display: block;
}
EDIT: Here a jsfiddle: https://jsfiddle.net/634ctoxw/

Answer 2

Try the below one:
#contentapp #content article {
display: none;
}
input#interest:checked ~ #content article.interest{
display: block;
}
You need to handle the ID properly.

Answer 3

Use the following code:
$(document).on('click', "input[type='radio']", function(){
$('#contentapp article').hide();
var id = $(this).attr('id');
$('.' + id).show();
});
#contentapp article {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentapp">
<input type="radio" name="menu" id="interest" checked>
<input type="radio" name="menu" id="about">
<div id="tab">
<label for="interest">Interest</label>
<label for="about">About</label>
</div>
<div id="content">
<article class="interest">
Interest
</article>
<article class="about">
About
</article>
</div>
</div>