I have two siblings div where there are more divs contained inside, like this:
<div class="btn_lists">
<div class="btn green_btn">
<img src="<?= asset_url() ?>images/escolar_07__1.png" />
</div>
</div>
<div class="btn-desc-container">
<div class="btn-desc_1">
<p>Description</p>
</div>
</div>
By default I have btn-desc_1 with display: none;
I want that hovering green_btn applies display: inline-block; on btn-desc_1
How could I do this efficiently?
There is no way to achieve this via CSS. Use jquery piece of code:
$('.green_btn').hover(function(){
$('.btn-desc_1').toggleClass('display-inline');
})
like the demo: http://jsfiddle.net/nidzix/sWQr9/3/
Horroristic almost-answer. Probably very unreliable. It is only for demonstration, don't use it. Instead of hovering it works with clicking on the images:
:checked is supported only with IE9+: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
Live example, click the kittens: http://jsfiddle.net/bzH7S/2/
<body>
<input type="radio" name="btn" value="1" id="radio1">
<input type="radio" name="btn" value="2" id="radio2">
<div id="wrap">
<div class="btn_lists">
<label for="radio1" class="btn btn1"><img src="1"></label>
<label for="radio2" class="btn btn2"><img src="2"></label>
</div>
<div class="btn-desc-container">
<div class="btn-desc_1"><p>Kitten One</p></div>
<div class="btn-desc_2"><p>Kitten Second</p></div>
</div>
</div>
</body>
CSS:
body > input {
display: none;
}
.btn-desc-container > div {
display: none;
}
#radio1:checked ~ #wrap .btn-desc_1,
#radio2:checked ~ #wrap .btn-desc_2 {
display: block;
}
There's no way to do this unless btn_desc1 is a child of green_btn, in which this would work:
.green_btn:hover > .btn-desc_1
{
display:inline-block;
}
with this HTML:
<div class="btn_lists">
<div class="btn green_btn">
<img width='400px' heigh='400px' src="http://www.pieisgood.org/images/slice.jpg" />
<div class="btn-desc_1">
<p>Description</p>
</div>
</div>
in your CSS. However, you could use JQuery for this to reach your goal, like nidzik says:
$('.green_btn').hover(function(){
$('.btn-desc_1').toggleClass('display-inline');
})
Here's the demo
Related
complete coding newbie with no formal HTML/CSS education here. I am experimenting with a project and wanted to try and make a list of paragraph elements hidden and expandable.
It is important to note that my ways of modifying the site in question are rather limited. I can only directly modify the CSS of the page and the HTML -in- the <h2 class="label"> (not the class itself).
I have included the pieces of HTML and CSS below. The first toggle correctly hides the "Control me"-text. I was wondering if I could do the same for the div class "value" or the paragraph elements under it. The second piece of CSS is, evidently, not working. I assume this has to do with the placement/relationship of the elements. So, my question is: is this, at all, possible? If so, how?
I am aware that this "checkbox hack" is not recommended. With the limitiations I described above, I at least want to try it. Consequently, I would appreciate all help on this topic, if only for the sake of experimentation/knowledge.
My apologies if this is a silly question. Thanks in advance!
#toggle:checked ~ .control-me{
display: none; /*this works*/
}
#toggle:checked ~ .value{
display: none; /*this does not work*/
}
<section class="item references">
<h2 class="label">
<label for="toggle">References</label>
<input type="checkbox" id="toggle" class="visually-hidden">
<div class="control-me">Control me</div>
</h2>
<div class="value">
<p>Originally lots of different paragraph elements here</p>
</div>
</section>
#toggle:checked ~ .control-me{
display: none; /*this works*/
}
#toggle:checked ~ .value{
display: none; /*this does not work*/
}
<section class="item references">
<label for="toggle">References</label>
<input type="checkbox" id="toggle" class="visually-hidden">
<div class="control-me">Control me</div>
<div class="value">
<p>Originally lots of different paragraph elements here</p>
</div>
The '~' selector requires that both elements have the same parent and element 1 comes before element 2.
In your first example #toggle:checked comes before .control-me and the elements are both children of the same parent.
Where as in your second example: #toggle:check does come before .value but they are not from the same parent
https://www.w3schools.com/cssref/sel_gen_sibling.asp
EDIT: I have added a snippet with the h2 tag removed, to show that if they shared a parent, the desired effect would be achieved.
The main problem is that you have wrapped the control-me class inside a <h2> tag. Where as the .value class is outside the h2 tag so it changes only elements inside <label>.
Solution No 1:
Put the outside h2 tag.It works
<section class="item references">
<h2>
<label for="toggle">References</label>
</h2>
<input type="checkbox" id="toggle" class="visually-hidden" />
<div class="control-me">Control me</div>
<div class="value">
<p>Originally lots of different paragraph elements here</p>
</div>
</section>
Solution No 2:
Wrap the things you want to hide inside h2 tag
<section class="item references">
<h2>
<label for="toggle">References</label>
<input type="checkbox" id="toggle" class="visually-hidden" />
<div class="control-me">Control me</div>
<div class="value">
<p>Originally lots of different paragraph elements here</p>
</div>
</h2>
</section>
Here is a JavaScript answer (because you mentioned in a comment that you can use JS)-
Add a class d-none in CSS and toggle the class via JavaScript on each click.
Here is a working example-
document.getElementById("toggle").addEventListener("click", function(){
document.getElementsByClassName("value")[0].classList.toggle("d-none");
});
#toggle:checked ~ .control-me{
display: none; /*this works*/
}
.d-none{
display: none;
}
<section class="item references">
<h2 class="label">
<label for="toggle">References</label>
<input type="checkbox" id="toggle" class="visually-hidden">
<div class="control-me">Control me</div>
</h2>
<div class="value">
<p>Originally lots of different paragraph elements here</p>
</div>
</section>
Edit : Here is the snippet with script tag in the case there is some problem with inserting scripts externally.
#toggle:checked ~ .control-me{
display: none; /*this works*/
}
.d-none{
display: none;
}
<section class="item references">
<h2 class="label">
<label for="toggle">References</label>
<input type="checkbox" id="toggle" class="visually-hidden" onclick="hide()"/>
<div class="control-me">Control me</div>
</h2>
<div class="value">
<p>Originally lots of different paragraph elements here</p>
</div>
</section>
<script>
function hide(){
document.getElementsByClassName("value")[0].classList.toggle("d-none");
}
</script>
I want to split my site in two vertical sections. If you click on a left button (width:50%), the content for this button should appear below with width:100% and if you click on the right button the same but of course with content 2.
Is it even possible with pure css? Because I don't know java :/ and I think it's a quite simple problem, isn't it?
#content_button_left,
content_button_right {
display: none
}
#button_left:active~#content_button_left {
display: inherit
}
#button_right:active~#content_button_right {
display: inherit
}
<div>
<div style="display:flex">
<div id="button_left" style="flex:1">Menu left</div>
<div id="button_right" style="flex:1">Menu right</div>
</div>
<div id="content_button_left" style="width:100%">
blabla 1
</div>
<div id="content_button_right" style="width:100%">
blabla 2
</div>
</div>
You can use :target CSS selector to fake the click event but for that you have to convert your div to anchor tag, below is CSS
#content_button_left, #content_button_right{
display:none
}
#content_button_left:target {
display:block;
}
#content_button_right:target{
display:block;
}
Updated HTML
<div style="display:flex">
<a id="button_left" href="#content_button_left" style="flex:1">Menu left</a>
<a id="button_right" href="#content_button_right" style="flex:1">Menu right</a>
</div>
<div id="content_button_left" style="width:100%">
blabla 1
</div>
<div id="content_button_right" style="width:100%">
blabla 2
</div>
I would use radio buttons next to the content and labels for your button targeting the radios. This way you can use the adjacent sibling selector to only show the content next to a checked radio:
/* hide radio and content */
.radio,
.content {
display: none;
}
/* show content if it directly follows a checked radio */
.radio:checked + .content {
display: block;
}
<div>
<div style="display:flex">
<label id="button_left" style="flex:1" for="left-input">Menu left</label>
<label id="button_right" style="flex:1" for="right-input">Menu right</label>
</div>
<input type="radio" name="show-content-radio" id="left-input" class="radio">
<div id="content_button_left" style="width:100%" class="content">
blabla 1
</div>
<input type="radio" name="show-content-radio" id="right-input" class="radio">
<div id="content_button_right" style="width:100%" class="content">
blabla 2
</div>
</div>
I have a project where I show and hide elements using checkboxes in conjunction mit CSS only. The following pattern, see also https://jsfiddle.net/37bqmbuo/, works for me.
HTML:
<input class="switch-1" type="checkbox">
<input class="switch-2" type="checkbox">
<input class="switch-3" type="checkbox">
<div class="hidden-1 hidden-2">Info 1</div>
<div class="hidden-2 hidden-3">Info 2</div>
<div class="hidden-1 hidden-3">Info 3</div>
<div class="hidden-1">Info 4</div>
<div class="hidden-3">Info 5</div>
CSS:
.switch-1:checked ~ .hidden-1
{
display: none;
}
.switch-2:checked ~ .hidden-2
{
display: none;
}
.switch-3:checked ~ .hidden-3
{
display: none;
}
But the more options I have, the more classes I need to create. Is there a smarter way to implement this with CSS only?
Actually, there is.
Put the element you want to target after the input like so:
<input type="checkbox" value="My Checkbox" />
<div class="toggle">Toggle me</div>
and do some CSS magic:
input:checked + .toggle { display: none; }
I'm styling an input group <div> wrapper as display:table; with all contents display:table-cell; When I want to have a fixed width on the table, if the cell I want to widen/shorten to take up the remainder width is a <span> element or a <ul> element, for example, then setting width:100%; works. However, if the element is an <input> or <button> then this does not work in firefox or chrome (but does in IE) and the result is the element takes up the entire space of the input group, pushing the next element down to a new row. I can get around this by putting the <input> or <button> inside a <span> element and setting width:100%; on both, but I'd rather have a css solution.
<div class="input-group wide">
<input type="text" style="width:100%;"></input>
<button>S</button>
</div>
css:
.input-group {
display:inline-table;
padding:0px;
background-color: grey;
}
.input-group > input, .input-group > button, .input-group > span, .input-group > ul {
display: table-cell;
margin:0px;
}
.wide {
width: 260px;
}
http://jsfiddle.net/5v3Lg50d/3/
Floats are good idea, you can follow Epik's solution.
I checked one thing with Firebug for Firefox and I learned that <button> works fine with its parent div having style="display: inline-flex".
You might want to check this against other browsers and use it conditionally, or go with floats instead.
I have a JS fiddle here with the changes made.
http://jsfiddle.net/5v3Lg50d/4/
Basically i changed a few small things and tidied up your fiddle. The elements you wanted full width i added in a class and floated left;
.fullWidth {
width:100%;
display:inline-block;
float:left;
}
The following is the code i amended:
<div class="input-group wide" style="">
<span class="fullWidth">space</span>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<ul class="fullWidth"><li>o1</li><li>o2</li></ul>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<input type="text" class="fullWidth"></input>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide">
<span><input class="fullWidth"></input></span>
<button class="fullWidth">S</button>
</div>
<br />
<br />
<div class="input-group wide">
<button class="fullWidth">A button</button>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<span><button class="fullWidth">A button</button></span>
<button>S</button>
</div>
Hope this helps.
-Epik
All,
I have the following code:
http://jsfiddle.net/k2AMG/7/
I am trying to avoid fixed widths in the CSS and align the divs in this fashion, but am not able to do so:
Your name Textbox
Please check the name
Work email Textbox
Email should have a valid format
Job title Textbox
Job title should have only alphabets
Any help is appreciated. Thanks
Try it like this:
http://jsfiddle.net/andresilich/k2AMG/11/
::Edit:: fixed demo
::Edit 2:: added CSS and HTML to post for future reference
CSS
.data_item{
margin-bottom: 20px;
display: block;
}
label
{
width: 100px;
display:inline-block;
}
.left {
display:inline-block;
margin-right:5px;
}
.right {
display:inline-block;
vertical-align:top;
}
.right span span {
display:list-item;
list-style-type:none;
}
Clarification: created two classes to separate the two sides, .left and .right, and added a style to the span of the .instructions div to display as a list-item (so they can displace like a regular html list would, why? Because it is a clean, responsive drop that displaces naturally without the need to add margin or padding that might displace with any other element around and thus less maintenance.).
HTML
<div class="data_item">
<div class="left">
<label> Your name </label>
</div>
<div class="right">
<span>
<input type="text" />
<span class="instructions">Please check the name</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Work email </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Email should have a valid format</span>
</span>
</div>
</div>
<div class="data_item">
<div class="left">
<label> Job title </label>
</div>
<div class="right">
<span class="item">
<input type="text" />
<span class="instructions">Job title should have only alphabets</span>
</span>
</div>
</div>
Try this: http://jsfiddle.net/k2AMG/9/