Showing/hiding elements inside a div block with HTML and CSS - html

I would like to show/hide elements inside a div block. A similar post showed me how, but I can't make the links inside the div block work properly.
The div block:
<div class="collapse" tabindex="1">
<h1> Test </h1>
<p>link</p>
<p>some other text</p>
</div>
The CSS part:
.collapse > * + *{
display:none;
}
.collapse:focus > * + *{
display:block;
}
Here is a JSFiddle of my script.
Basically, as I click on the link, the div block collapse.
Do you know how can I fix this? Thanks!!

You can't do this natively with CSS, you'll have to use JavaScript. Here is my code:
HTML:
<h1>Test</h1>
<div class="show-on-click">
link
<p>some other text</p>
</div>
CSS:
.show-on-click {
display: none;
}
.show-on-click.is-active {
display: block;
}
JavaScript (jQuery):
$(".clickme").on("click", function () {
$(".show-on-click").toggleClass("is-active");
});
I hope this all makes sense. Sorry I had to kind of massacre your code to achieve it. I've updated your jsfiddle here.

Related

Hover effect on a different element

I have this structure:
HTML
<div class="bottom-container">
<div class="double-arrow"></div>
<div class="bottom-box green margin-top">
<h1 class="bottom-box-h1">Box title 1</h1>
<p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
</div>
</div>
The .bottom-box-text isn't displayed on default. It has a display:none property.
I need to display the .bottom-box-text div when I hover over the .double-arrow div. But I cant figure it out.
I have this CSS:
.double-arrow:hover .bottom-box-text {
display: inline;
}
I tried different selectors (like "+" "~"), but it doesn't work.
Thank you if you can help!
You can use general sibling selector to select .bottom-box first:
.bottom-box-text {
display: none;
}
.double-arrow:hover ~ .bottom-box .bottom-box-text {
display: inline;
}
<div class="bottom-container">
<div class="double-arrow">Arrow</div>
<div class="bottom-box green margin-top">
<h1 class="bottom-box-h1">Box title 1</h1>
<p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>
</div>
</div>
.double-arrow:hover + div > .bottom-box-text {
display: inline;
}
Basically, when the double arrow is hovered, the div right after is selected and its children having .bottom-box-text will have the effect applied. If it doesn't, you'll maybe have to use !important as an attribute on display.

Targeting html elements inside div using css

Given this HTML as an example, is there a way to target all the elements inside a given <div> individually without having to change each CSS selector.
<div id="div1">
<h3>h3 div 1</h3>
<!-- whole bunch of html here -->
</div>
<div id="div2">
<h3>div 2</h3>
<!-- whole bunch of html here -->
</div>
This is how I normally do it...
#div1 > h3 {
background-color: lightblue;
}
However i am looking for a solution like this (treat this as pseudo code)
#div2 {
h3 {
background-color: lightgreen;
}
}
Here is a fiddle too: https://jsfiddle.net/8bstkq7u/1/
You can use exactly this syntax if you use scss. Change css to scss in your fiddle and your code will work.
This guide is a good point to start: SASS

How to put Nav, Title and Image in one line?

My end result is to have my nav on both the right and left, with the the title between them with an image between the title. I use a-hrefs in a div as the links with uls and lis as my subnavs.
What are the options to keep it all on one line and the image centered vertically with the text.
Example:
<div>
<a>LINK</a>
<a>LINK</a>
<h1>TITLE</h1>
<img>
<h1>TITLE</h1>
<a>LINK</a>
<a>LINK</a></div>
I have tried to slip the div up ending the first part of the div where the < h1> goes, then picking it back up after the second title < /h1>.
Example:
<div>
<a>LINK</a>
<a>LINK</a>
</div>
<h1>TITLE</h1>
<img>
<h1>TITLE</h1>
<div>
<a>LINK</a>
<a>LINK</a>
</div>
try this way
<div >
<a style="float:left">LINK</a>
<a style="float:left">LINK</a>
<h1 style="float:left">TITLE</h1>
<img style="float:left">
<h1 style="float:left">TITLE</h1>
<a style="float:left">LINK</a>
<a style="float:left">LINK</a>
</div>
Although that is not the best practice as you have done it in your example, but for the sake of simple answer you can just add CSS vertical-align: middle to title/logo wrapper. Like this:
HTML part:
<div class="menu">
Link
Link
Link
<div><h1>Your title <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Internet_Explorer_7_Logo.png/64px-Internet_Explorer_7_Logo.png" style="width:64px; height:64px; vertical-align:middle"> Your title</h1></div>
Link
Link
Link
</div>
And CSS:
.menu { text-align: center; }
.menu a, .menu div { display: inline-block; }
.menu a { margin: 0px 5px; }
.menu div { font-size: 20px; font-weight: bold; margin: 0px 20px; vertical-align:middle}
Here is sample demo in codepen - http://codepen.io/anon/pen/JdzvgK
And, btw - YES, this is valid code - you can safely put IMG inside H1. Even w3 themselfs is using this practice in their header - http://www.w3.org/ :)
A pretty common practice is to use a ul structure. It give you some nice structure.
I gave an outline here:
How to style more than one ul (it is for a nav)
And also provided this link (there are lot of nav oriented example on the internet):
http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html

Identify div through css

I have this HTML Code:
<div id="loggedin">
</div>
<div id="notloggedin">
</div>
<div>
</div>
I want two identify the last div which is not "loggedin" and "notloggedin". How will I do that through css?
This uses CSS3's :not() selector. It will work for all DIV that do not have an id attribute present.
div:not([id]){
color:green;
}
<div id="loggedin">
text
</div>
<div id="notLoggedIn">
text
</div>
<div>
this should come out green
</div>
Another Example that came up as a result of comments
Since we are unaware of what your HTML looks like, this may be a bit better suited for your needs.
.container > div:not([id]) {
color: green;
}
<div class="container">
<div id="loggedin">
Logged In
</div>
<div id="notloggedin">
Logged Out
</div>
<div>
This text should be green
</div>
</div>
<div>
this text should not be green because it isn't a child of the container div.
</div>
You can target the last div with CSS using three ways.
First way:
div:last-child {
//styles come here
}
Second way:
div:nth-child(3) {
//styles come here
}
Third way:
div:not([id]){
//styles come here
}
There might be other ways as well using psuedo-selectors.
Try to be a bit more clear in your question, to revise my answer, if you want to refer to the 3rd div (that's not what you asked at all). then as the others said, you need to wrap the three div's in a parent-div and refer to it using either nth-child, or [not]. You also asked this same question (worded differently) like 2 minutes before asking this one.
nth-child
div:nth-child(3) {
}
not
div:not([id]){
}
PS. I don't see any reason why you can't give the last div an id or class anyways.
use :last-child in your css for the div tag.
HTML:
CSS:
div:last-child
{
//your styles for last div here.
}

Nested divs of same class, show child on hover

I'm trying to show a hidden div on hover of its parent.
My issue is that there are nested divs of the same class, and when I hover an "inner" div, its parent is also hovered and both their hidden children are shown.
html:
<div class="a_class">
lorem ipsum
<div class="inner">
hidden...
</div>
<div class="b_class">
blahblah<br />
<div class="a_class">
<div class="inner">
hidden...
</div>
lorem ipsum
</div>
</div>
</div>
css:
.inner{display:none;}
.a_class:hover > .inner{display: block;}
fiddle: http://jsfiddle.net/Nb6tD/
In other words, i'm trying to achieve this: when i hover over the second .a_class, only the .inner under it should show up, not the .inner under the "parent" .a_class.
Is it possible only with css?
Thanks in advance
EDIT: the answer
So, it appears it CAN'T be done with pure css, unless the html markup changes - which is not possible in my case.
I wished for a css3-magic solution, but since there's no such option, i'm going javascript.
I accepted the most suitable solution though for future reference, for all out there that have the possibility of changing the html structure.
I don't think you can "fix" this without changing the html structure - you could have an element enclosing the hoverable area and its corresponding button:
Here, i've added a .hoverArea div. (Extra div not needed on the innermost one, as it only contains a single .inner)
html
<div class="a_class">
<div class="hoverArea">
lorem ipsum
<div class="inner">
hidden...
</div>
</div>
<div class="b_class">
blahblah<br />
<div class="a_class hoverArea">
<div class="inner">
hidden...
</div>
lorem ipsum
</div>
</div>
</div>
css
.hoverArea:hover > .inner{
display: block;
}
Demo at http://jsfiddle.net/Nb6tD/7/
It is not possible with pure css because you are hovering on the parent element as well as the .a_class child element then ofcourse it will show you both the blocks.
If you can change the html to some extent then it can be achieved easily.
The changes I have done to html are:
I wrapped the complete html code in .block class element.
closed the parent .a_class before starting of the .b_class element.
CSS
.block, .block .b_class>.a_class {
border: 1px solid red;
padding: 15px;
}
Working fiddle
The problem is that as the second set are nested inside the first .a_class, in effect the first .a_class is still being hovered over when you hover over the second .a_class.
So at that time both elements are interpreted as being hovered, which will trigger the behaviour that is happening.
In this way? (needs some HTML changes)
http://jsfiddle.net/Nb6tD/6/
i {
display: none;
}
.trick:hover > i {
display: inline;
}
It Works for me
You just need to point or access exact tag or class in inner child where you want to apply your css
e.g:
.footer-custom-icons li:hover > .iconlist-item-icon i,
.footer-custom-icons li:hover > .iconlist-item-content p a
{
color: white !important;
}