There will be a 4 pixel wide space between these span elements:
span {
display: inline-block;
width: 100px;
background-color: palevioletred;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Fiddle Demo
I understand that I could get rid of that space by removing the white-space between the span elements in the HTML:
<p>
<span> Foo </span><span> Bar </span>
</p>
I'm Looking for a CSS solution that doesn't involve:
Altering the HTML.
JavaScript.
Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Since this answer has become rather popular, I'm rewriting it significantly.
Let's not forget the actual question that was asked:
How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?
It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.
http://jsfiddle.net/thirtydot/dGHFV/1361/
This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).
Most of the possible issues with relative font sizes are not complicated to fix.
However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).
This is what I, as a reasonably experienced web developer, actually do to solve this problem:
<p>
<span>Foo</span><span>Bar</span>
</p>
Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.
It's easy. It's simple. It works everywhere. It's the pragmatic solution.
You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.
Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can do this, as I usually do:
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
http://jsfiddle.net/thirtydot/dGHFV/1362/
Or, this:
<ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>
Or, use comments:
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>
Or, if you are using using PHP or similar:
<ul>
<li>Item 1</li><?
?><li>Item 2</li><?
?><li>Item 3</li>
</ul>
Or, you can even skip certain closing tags entirely (all browsers are fine with this):
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.
For CSS3 conforming browsers there is white-space-collapsing:discard
see: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
Today, we should just use Flexbox.
OLD ANSWER:
OK, although I've upvoted both the font-size: 0; and the not implemented CSS3 feature answers,
after trying I found out that none of them is a real solution.
Actually, there is not even one workaround without strong side effects.
Then I decided to remove the spaces (this answers is about this argument) between the inline-block divs from my HTML source (JSP),
turning this:
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
to this
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
that is ugly, but working.
But, wait a minute... what if I'm generating my divs inside Taglibs loops (Struts2, JSTL, etc...) ?
For example:
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock">
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:push>
</s:iterator>
</s:iterator>
It is absolutely not thinkable to inline all that stuff, it would mean
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock">
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:push></s:iterator>
</s:iterator>
That is not readable, hard to maintain and understand, etc.
The solution I found:
use HTML comments to connect the end of one div to the begin of the next one!
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock">
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:push><!--
--></s:iterator>
</s:iterator>
This way you will have a readable and correctly indented code.
And, as a positive side effect, the HTML source, although infested by empty comments,
will result correctly indented;
let's take the first example. In my humble opinion, this:
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
is better than this:
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
Add display: flex; to the parent element. Here is the solution with a prefix:
Simplified version 👇
p {
display: flex;
}
span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Fix with prefix 👇
p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
All the space elimination techniques for display:inline-block are nasty hacks...
Use Flexbox
It's awesome, solves all this inline-block layout bs, and as of 2017 has 98% browser support (more if you don't care about old IEs).
Are We Ready to Use Flexbox?
Using CSS flexible boxes - Web developer guide | MDN
A Complete Guide to Flexbox | CSS-Tricks
Flexy Boxes — CSS flexbox playground and code generation tool
Add comments between elements to NOT have a white space. For me it is easier than resetting font size to zero and then setting it back.
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
This is the same answer I gave over on the related: Display: Inline block - What is that space?
There’s actually a really simple way to remove whitespace from inline-block that’s both easy and semantic. It’s called a custom font with zero-width spaces, which allows you to collapse the whitespace (added by the browser for inline elements when they're on separate lines) at the font level using a very tiny font. Once you declare the font, you just change the font-family on the container and back again on the children, and voila. Like this:
#font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
Suit to taste. Here’s a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator. Took me all of 5 minutes. The css #font-face declaration is included: zipped zero-width space font. It's in Google Drive so you'll need to click File > Download to save it to your computer. You'll probably need to change the font paths as well if you copy the declaration to your main css file.
2021 Solution
Unfortunately white-space-collapse is still not implemented.
In the meantime, give the parent element font-size: 0; and set the font-size on the children. This should do the trick
Two more options based on CSS Text Module Level 3 (instead of white-space-collapsing:discard which had been dropped from the spec draft):
word-spacing: -100%;
In theory, it should do exactly what is needed — shorten whitespaces
between 'words' by the 100% of the space character width, i.e. to
zero. But seems not to work anywhere, unfortunately, and this
feature is marked 'at risk' (it can be dropped from the specification, too).
word-spacing: -1ch;
It shortens the inter-word spaces by the width of the digit '0'. In a monospace font it should be exactly equal to the width of the space character (and any other character as well). This works in Firefox 10+, Chrome 27+, and almost works in Internet Explorer 9+.
Fiddle
Use flexbox and do a fallback (from suggestions above) for older browsers:
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Though, technically not an answer to the question:
"How do I remove the space between inline-block elements?"
You can try the flexbox solution and apply the code below and the space will be remove.
p {
display: flex;
flex-direction: row;
}
You can learn more about it on this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Simple:
item {
display: inline-block;
margin-right: -0.25em;
}
There is no need to touch the parent element.
Only condition here: the item's font-size must not be defined (must be equal to parent's font-size).
0.25em is the default word-spacing
W3Schools - word-spacing property
font-size:0; can be a bit trickier to manage...
I think the following couple lines is a lot better and more re-usable, and time saver than any other methods. I personally use this:
.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}
/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}
Then you can use it as following...
<ul class="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
As far I as I know (I may be wrong) but all browsers support this method.
EXPLANATION:
This works (maybe -3px may be better) exactly as you would anticipate it to work.
you copy and paste the code (once)
then on your html just use class="items" on the parent of each inline-block.
You will NOT have the need to go back to the css, and add another css rule, for your new inline blocks.
Solving two issues at once.
Also note the > (greater than sign) this means that */all children should be inline-block.
http://jsfiddle.net/fD5u3/
NOTE: I have modified to accommodate to inherit letter-spacing when a wrapper has a child wrapper.
Generally we use elements like this in different lines, but in case of display:inline-block using tags in same line will remove the space, but in a different line will not.
An example with tags in a different line:
p span {
display: inline-block;
background: red;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Example with tags in same line
p span {
display: inline-block;
background: red;
}
<p>
<span> Foo </span><span> Bar </span>
</p>
Another efficient method is a CSS job that is using font-size:0 to the parent element and give font-size to a child element as much as you want.
p {
font-size: 0;
}
p span {
display: inline-block;
background: red;
font-size: 14px;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
The above methods may not work somewhere depending on the whole application, but the last method is a foolproof solution for this situation and can be used anywhere.
I'm not pretty sure if you want to make two blue spans without a gap or want to handle other white-space, but if you want to remove the gap:
span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
float: left;
}
And done.
I had this problem right now and from font-size:0; I've found that in Internet Explorer 7 the problem remains because Internet Explorer thinks "Font Size 0?!?! WTF are you crazy man?" - So, in my case I've Eric Meyer's CSS reset and with font-size:0.01em; I have a difference of 1 pixel from Internet Explorer 7 to Firefox 9, so, I think this can be a solution.
p {
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: red;
font-size: 30px;
color: white;
}
<p>
<span> hello </span>
<span> world </span>
</p>
I’ve been tackling this recently and instead of setting the parent font-size:0 then setting the child back to a reasonable value, I’ve been getting consistent results by setting the parent container letter-spacing:-.25em then the child back to letter-spacing:normal.
In an alternate thread I saw a commenter mention that font-size:0 isn’t always ideal because people can control minimum font sizes in their browsers, completely negating the possibility of setting the font-size to zero.
Using ems appears to work regardless of whether the font-size specified is 100%, 15pt or 36px.
http://cdpn.io/dKIjo
I think there is a very simple/old method for this which is supported by all browsers even IE 6/7. We could simply set letter-spacing to a large negative value in parent and then set it back to normal at child elements:
body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */
.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>
<div class="">
<span>Item-1</span>
<span>Item-2</span>
<span>Item-3</span>
</div>
<hr/>
<p style="color:green">Correct (no-spacing):</p>
<div class="no-spacing">
<span>Item-1</span>
<span>Item-2</span>
<span>Item-3</span>
</div>
The simplest answer to this question is to add.
css
float: left;
codepen link: http://jsfiddle.net/dGHFV/3560/
With PHP brackets:
ul li {
display: inline-block;
}
<ul>
<li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li>
</ul>
I'm going to expand on user5609829's answer a little bit as I believe the other solutions here are too complicated/too much work. Applying a margin-right: -4px to the inline block elements will remove the spacing and is supported by all browsers. See the updated fiddle here. For those concerned with using negative margins, try giving this a read.
The CSS Text Module Level 4 specification defines a text-space-collapse property, which allow to control the how white space inside and around an element is processed.
So, regarding your example, you would just have to write this:
p {
text-space-collapse: discard;
}
Unfortunately, no browser is implementing this property yet (as of September 2016) as mentioned in the comments to the answer of HBP.
I found a pure CSS solution that worked for me very well in all browsers:
span {
display: table-cell;
}
Add white-space: nowrap to the container element:
CSS:
* {
box-sizing: border-box;
}
.row {
vertical-align: top;
white-space: nowrap;
}
.column{
float: left;
display: inline-block;
width: 50% // Or whatever in your case
}
HTML:
<div class="row">
<div class="column"> Some stuff</div>
<div class="column">Some other stuff</div>
</div>
Here is the Plunker.
There are lots of solutions like font-size:0,word-spacing,margin-left,letter-spacing and so on.
Normally I prefer using letter-spacing because
it seems ok when we assign a value which is bigger than the width of extra space(e.g. -1em).
However, it won't be okay with word-spacing and margin-left when we set bigger value like -1em.
Using font-size is not convenient when we try to using em as font-size unit.
So, letter-spacing seems to be the best choice.
However, I have to warn you
when you using letter-spacing you had better using -0.3em or -0.31em not others.
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
cursor: auto;
}
.nav {
width: 260px;
height: 100px;
background-color: pink;
color: white;
font-size: 20px;
letter-spacing: -1em;
}
.nav__text {
width: 90px;
height: 40px;
box-sizing: border-box;
border: 1px solid black;
line-height: 40px;
background-color: yellowgreen;
text-align: center;
display: inline-block;
letter-spacing: normal;
}
<nav class="nav">
<span class="nav__text">nav1</span>
<span class="nav__text">nav2</span>
<span class="nav__text">nav3</span>
</nav>
If you are using Chrome(test version 66.0.3359.139) or Opera(test version 53.0.2907.99), what you see might be:
If you are using Firefox(60.0.2),IE10 or Edge, what you see might be:
That's interesting. So, I checked the mdn-letter-spacing and found this:
length
Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.
It seems that this is the reason.
Add letter-spacing:-4px; on parent p css and add letter-spacing:0px; to your span css.
span {
display:inline-block;
width:100px;
background-color:palevioletred;
vertical-align:bottom;
letter-spacing:0px;
}
p {
letter-spacing:-4px;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
I thought I'd add something new to this question as although many of the answers currently provided are more than adequate & relevant, there are some new CSS properties which can achieve a very clean output, with full support across all browsers, and little to no 'hacks'. This does move away from inline-block but it gives you the same results as the question asked for.
These CSS properties are grid
CSS Grid is highly supported (CanIUse) apart from IE which only needs an -ms- prefix to allow for it to work.
CSS Grid is also highly flexible, and takes all the good parts from table, flex, and inline-block elements and brings them into one place.
When creating a grid you can specify the gaps between the rows and columns. The default gap is already set to 0px but you can change this value to whatever you like.
To cut it a bit short, heres a relevant working example:
body {
background: lightblue;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-column-gap: 0; /* Not needed but useful for example */
grid-row-gap: 0; /* Not needed but useful for example */
}
.box {
background: red;
}
.box:nth-child(even) {
background: green;
}
<div class="container">
<div class="box">
Hello
</div>
<div class="box">
Test
</div>
</div>
Negative margin
You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don’t care about those browsers at least you can keep the code formatting clean.
span {
display: inline-block;
margin-right: -4px;
}
One another way I found is applying margin-left as negative values except the first element of the row.
span {
display:inline-block;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
margin-left:-5px;
}
span:first-child{
margin:0px;
}
Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x
The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.
Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.
PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.
Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it
You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/
I tried searching for an answer first, but this seems to be an edge case.
I'm adding a class to a link via JavaScript (well jQuery actually but I don't think it matters in this case). The class adds an icon as a background image and some padding. The padding and background image fail to appear on certain links. The problem shows up in IE8, but surprisingly works fine in IE7. I can't test IE9/10. Works fine in Firefox.
I reduced the code down to a bare minimum and created a jsFiddle that illustrates the problem. http://jsfiddle.net/toxalot/fsdcu/
I'll try adding the code here.
<style type="text/css">
body { background-color: #fff }
a:hover { background-color: transparent; color: #c30 }
ul { padding-left: 40px }
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc }
</style>
<ul>
<li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<ul>
<li style="float: left"><a class="linkExternal" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<script type="text/javascript">
$('.linkExternal').each(function() {
$(this).addClass('iconNewWindowLeave');
});
</script>
I've removed the image from the example and added a background color for illustration. In IE 8, the second link doesn't have right padding. Hovering over the link, adds the padding. If I remove the a:hover CSS, hovering doesn't correct the problem. If I remove the float, the problem goes away. If I remove any of the other CSS, the problem goes away.
So I've narrowed down the cause(s), but I don't know what to do about it. I don't want to remove or change the existing code. It's all required for the site layout. If possible, I'd like to add some CSS or JavaScript to fix it. It's a minor issue, but it's bugging me. I'm also curious as to whether or not the problem appears in newer versions of IE.
try to add : a display:inline-block; or display:block; to .iconNewWindowLeave
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; }
(not tested)
Whenever you have some floating containers on the page, always clear the parent container.
In your case add a style clear:left on the ul. That should work.
And in case you are using many float throughout your application, better add a clearfix class on the parent container.
I'd like to toggle a <div>, but my requirement is that it must work with javascript turned off. I would like to select a hyperlink that states "modify search" and the div that contains the search criteria displays.
I've found a TON of demos using jQuery, but they all require javascript enabled. Any assistance is appreciated.
Here you go, skipper! (edit — updated for science)
HTML:
<label for=cb>Click Here</label>
<input type='checkbox' style='display: none' id=cb>
<div>
Hello. This is some stuff.
</div>
CSS:
input:checked + div { display: none; }
edit — an additional note: display: none will cause certain browsers (IE) to pay no attention to the <input> checkbox. Instead of hiding it with the display CSS attribute, you can "move" it offscreen with something like position: absolute; left: -10000px;.
The <details> element does what you ask without any CSS or JavaScript applied.
It is of course not a div, so it doesn't answer your question literally, but I read your requirement being having some content you wish to conditionally reveal or conceal.
The <details> creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.
Unfortunately browser support for <details> is less than perfect, IE and Edge currently having no support at all. Edge status is Under Consideration. Development of IE is stopped so it will never gain support.
Here is the simple example follow this and you will be able to create toggle using css without any JAVASCRIPT and JQUERY. You can also add animations using css without JQUERY. CSS3 is AWESOME! :)
.box{width:200px;
height:0;
background:red;
transition:all 0.4s linear;}
input:checked ~ .box{height:220px;}
<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle"> CLICK ME </label>
<div class="box"> </div>
You can't toggle on clicks without javascript. End.
Update:
If you can use CSS 3 selectors, you'll have to change your DOM structure and use CSS 3 selectors without a library that covers old browsers which are probably a lot more common than users with javascript off, You can usee #pointy answer with :selected.
So I would say, practically it's still impossible...!
For a little more polished version of the accepted answer, a common practice is to combine a hidden checkbox + label to be able to have a clickable label on screen that maps to a hidden backing value that is available to both JavaScript (.checked) and to CSS (:checked)
<input type='checkbox' id='css-toggle-switch' checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>Error Details</label>
<div class='css-toggle-content'>
<pre><code>Unexpected StackOverflow</code></pre>
</div >
By putting our checkbox first, we can drive CSS decisions based on the :checked selector. We can grab subsequent elements with the adjacent sibling select + or the general sibling selector ~
/* always hide the checkbox */
.css-toggle-switch { display: none; }
/* update label text to reflect state */
.css-toggle-switch + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
/* conditionally hide content when checked */
.css-toggle-switch:checked ~ .css-toggle-content { display: none; }
/* make the label look clickable */
.css-toggle-switch + label {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Working Demo in jsFiddle & StackSnippets
.css-toggle-switch { display: none; }
.css-toggle-switch + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
.css-toggle-switch:checked ~ .css-toggle-content { display: none; }
.css-toggle-switch + label {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* just some styles to make the demo a little more pleasant */
.btn {
padding: 5px 10px;
background: white;
border: 1px solid grey;
border-radius: 3px;
width: 130px;
display: inline-block;
text-align: center;
}
.btn:hover {
background: #e6e6e6;
-webkit-box-shadow: inset 0 -1px 0 #dddddd;
-moz-box-shadow: inset 0 -1px 0 #dddddd;
box-shadow: inset 0 -1px 0 #dddddd;
}
.panel {
padding: 15px;
background: #ffe06d;
border: 1px solid #d69e01;
border-radius: 3px;
}
pre {
padding: 5px;
margin-bottom: 0;
background: #eaeaea;
border: 1px solid grey;
}
<div class="panel">
<input type='checkbox' id='css-toggle-switch'
checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>
Error Details
</label>
<div class='css-toggle-content'>
<pre><code>Unexpected StackOverflow</code></pre>
</div >
</div>
About three years late to the party, but I found this when I was looking to do the same thing, for a mobile menu, and subsequently found a very good solution, so I thought I'd post it for whoever else comes a-hunting.
The basic idea was from this article: http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800. I think
I've used a slightly simpler approach (stumbled on while setting it all
up). This hides / displays the navigation, by clicking the Menu button.
In the CSS, nav is set as "hidden" and nav:target is set to display. The page has two menu buttons, using the same image, both have class menubutton, absolute position in the same place.
menbuttonON has index 1000, sits outside nav in the html menubuttonOFF has index 1001, but sits inside nav, so it's invisible at first
In the HTML, clicking menubuttonON links to nav, which is then target, so
it displays. Inside that nav is menubuttonOFF, with a higher z-index
than menubutton ON, so that's on top now. Clicking menubuttonOFF links
back to menubuttonON, so nav isn't the target, and disappears, taking
menubuttonOFF with it.
Simplified CSS (without site-specific formatting):
nav {display: none;}
nav:target {display: block !important;}
.menubutton { position: absolute;
text-align: right;
top: 0;
margin-top: 14%;} /* This margin puts it below the header logo */
.menubuttonON {z-index: 1000;}
.menubuttonOFF {z-index: 1001;}
HTML
<header> <!-- logo here --> </header>
<div class="menubutton menubuttonON" name="buttonON"><img src="../Images/menubutton.png">MENU</div>
<nav id="nav" name="nav">
<div class="menubutton menubuttonOFF"><img src="../Images/menubutton.png">CLOSE</div>
<ul> <!-- all the navigation stuff --> </ul>
</nav>
You can see it working here: http://www.thewritersgreenhouse.co.uk/storyelements_resources/storyelements.htm.
What you ask is impossible without JavaScript. (Or, as #Pointy has pointed out, CSS3 selectors.)
You will have to modify your requirements, or better yet, just display the form by default and hide for JavaScript users (if necessary). Your page can work for everyone, and have unimportant features disabled for those that cannot use them.
No Javascript, no toggling. There are some pseudo CSS3 methods, but if you have to support JS off, you're certainly not supporting CSS3.
As others have said, you must use JS to achieve toggling of divs. If you want your website to work with javascript disabled, you need to design your website to fail gracefully when javascript isn't available. In other words, your website should NOT rely on JavaScript to function. Ex: AJAX forms should fall back to HTTP submit, etc.
You can't do it without using either Javascript or sending another request.
If you can live with the extra request (that is, an added page load is OK), then the most straightforward solution is to point the link to the current URL, but add a query string parameter, e.g. http://example.com/current-page?showsearch=1. Then, on the server, check if the showsearch parameter is set, and if so, initialize the search div to be visible.
Of course you will have to take care that the rest of your page state survives the request; you may have to use a form to be able to carry over any data the user may have entered, and this most likely means your link can't be a link, but has to be a button (because links cannot trigger form submits without Javascript).
The way to make this work with JS disabled is have the hyperlink have some href that accomplishes the task you desire - like:
/the/original/url?advanced-search=true
where the web server delivers different content when ?advanced-search=true is there. if JS is enabled, the jquery code you've researched should just cancel the original action.