I am trying to achieve toggle of div using just inline css but its not working. please note that inline css is required no javascript. Thanks guys.
</head>
<body>
<div>
<a id="hide1" href="#hide1" class="hide">+ Expand</a>
<a id="show1" href="#show1" class="show" style="display: none;">- Expand</a>
<div class="details" style="display: none;">
Content goes here.
</div>
</div>
</body>
</html>
Use the summary / details HTML elements.
<details>
<summary>Expand</summary>
Content goes here.
</details>
Use a checkbox instead.
input:not(:checked) + .toggle {
display: none;
}
<span>Show</span><input type="checkbox" />
<div class="toggle">Hello World!</div>
Related
Greeting all,
I'm a newbie here and I just started my carrier as junior web developer. Can some help me with below situation,
I have a WordPress theme, there's some contents doesn't want to be appear so I'm trying to hide those contents by adding some coding to Additional CSS and the div element that I'm trying to hide don't have any class or id given.
Please consider the example code below (I'm not showing entire code here, its just example code exact the same with html elements)
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
This solution only consider the posted code so not sure if it will also work in the actual wordpress theme, as there might be existing styles that overrides it.
The element to be hidden seems to be an error or helper text that follows a form, so perhaps this can be selected as: a div directly after a form inside summary-bottom.
Example:
.summary-bottom > form + div {
display: none;
}
<div id="shop">
<ul class="products">
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
<li class="product" style="list-style: none;">
<div class="product-inner">
<div class="product-thumbnail"></div>
<div class="product-summary">
<div class="summary-top"></div>
<div class="summary-bottom">
<div>Contents</div>
<form action="#">Form</form>
<div style="color: red;">Contents needs to be hide</div>
Link
</div>
</div>
</div>
</li>
</ul>
</div>
You can select the element with by using the general div tag.
We can specify this further by assuming that the div should always be a child of the .summary-bottom element, and then can either always select the third child or target the general div based on its inline style attribute.
This would leave you either with: .summary-bottom div:nth-child(2) (starting from 0) or .summary-bottom div[style="color: red;"].
Of course, how you can select such an element heavily varies on the real usage, and they are way more possibilities to do so, but both snippets mentioned should work on the above HTML code.
You can use the selector property
.summary-bottom div:nth-child(2) {
display: none;
}
I wonder why the css for the div class=iphone isn't working-you can't see a border or anything else I include in the css..however when I was writing the code on codepen it all worked just fine and once I did it on sublime, it won't show anything (but only for the div element with the class iphone). Does anyone know why? Thanks!!
Html:
<body>
<header>
<h1>Guess a Number!</h1>
<h2> - - - - - - - - - - - - -</h2>
<h3>Lets Play</h3>
<h4>Pick a number from 1-100</h4>
</header>
<section>
<div class="iphone"> ..
<div>
<input type="text" name="number" placeholder="number"
class=pickingNumber>
<button class="send"><i class="fa fa-share"></i></button>
</div>
<div class="playAgain">
<button class="buttons">
<p><b>---</b></p>
</button>
<button class="buttons">
<p><b>---</b></p>
</button>
</div>
</div>
</section>
<footer>
<div>
<p class="end">© Made by me</p>
<p class="end">Thanks for visiting!</p>
</footer>
</body>
</html>
part of css for that:
.iphone{
border: 6px solid #949599;
}
Does your HTML have a <link> to the css file?
http://www.w3schools.com/css/css_howto.asp
You have an extra div in the footer it seems. That may be a problem? There are precedential rules too, so make sure that iphone class is the last class loaded with that name.
You may need to give the iphone class some dimensions.
iphone {
height: 100px;
width: 100px;
}
I have an issue right now and i am curious if there is a possible way to solve this. I have 2 div's enclosed in href elements. The problem is that i want to exclude the <p> element. Is there a way to do this despite it being inside the href element? Thanks.
<a href= "sample.com">
<div class="1">
<p>Hello</p>
</div>
</a>
<a href= "test.com">
<div class="2">
<p>Hello</p>
</div>
</a>
Yes you can but I wouldn't advocate for it.
You could use CSS to remove the appearance of a link:
a{
text-decoration: none;
}
p{
cursor: default;
color: #000;
}
Then you could use preventDefault() to prevent the p from triggering the action on click:
$("p").click(function(e){
e.preventDefault();
});
FIDDLE
What you really should do is add another wrapper to contain your elements and then wrap your div with an a like so:
<div class="wrapper">
<a href="http://www.google.com" target="_blank">
<div class="1"></div>
</a>
<p>Hello</p>
</div>
$(function(){
$('p').click(function(){
alert($(this).attr('href'));
// or alert($(this).hash();
});
});
I want to display a div on hovering the anchor tag using css. Below is my html code
<td class="cellStyle">
<a href="#" class="linkStyle">
<div>Home</div>
<div style="display:none;">I'm here... (some html) </div>
</a></td>
Please tell me how i can achieve this using css.
Thanks
Give your hidden div a class:
<td class="cellStyle">
<a href="#" class="linkStyle">
<div>Home</div>
<div class="demo">I'm here... (some html) </div>
</a></td>
And use these styles:
<style>
a.linkStyle div.demo { display:none; }
a.linkStyle:hover div.demo { display:block; }
</style>
Working jsfiddle: http://jsfiddle.net/6pB8G/
how to make sub menu appear when hover over link?
CSS
a.linkStyle:hover div.here {
display:block;
}
div.here {
display : none;
}
HTML
<a href="#" class="linkStyle">
<div>Home</div>
<div class="here">I'm here... (some html) </div>
</a>
(Added a class to div which is to be hidden first)
JSFIDDLE DEMO
Try this:
CSS:
.hiddendiv {display:none;}
.linkStyle:hover > .hiddendiv { display:block; }
HTML:
<a href="#" class="linkStyle">
<div>Home</div>
<div class="hiddendiv">I'm here... (some html) </div>
</a>
here is a working demo
It's better to keep block level elements outside from inline elements. So, try keeping DIV outside from A.
here is demo:
HTML
<td>
<a class="tooltip">Home</a>
<div class="tip">I'm here... (some html)</div>
</td>
CSS:
.tip{display:none}
.tooltip:hover + .tip{display:block}
Working Demo
I've a problem with anchor tags :/
I've got the following code:
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
My goal is that when i click on B (divHrefB) the application go to "divB" but since this element hidden it doesn't work.
Please note, that i don't want to show divB (i want a link to the place where div are... is that possible?
At this point, i'm thinking on generate dynamically the href value (in this case, i would generate the following div)
<div name="divHrefB">
B
</div>
Thanks a lot.
just don't apply display: none, just add this css for the hidden div.
<div name="divHrefB" style="height: 0px;width: 0px;overflow:hidden;">
B
</div>
You're missing the ending closing " comment.
try this guy:
style="display: none;"
you are missing " in style end
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>