<div id="box"></div>
<div class="text"></div>?
$(document).ready(function () {
$('#box').click(function () {
$('.text').slideToggle('slow');
});
});
#box{
height:40px;
width:100px;
background:red;
}
#box:hover{background:blue;}
#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}
#box:hover:after{
border-top-color: blue;
}
.text{
display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}
/
Is that possible to use jQuery to add the styled after
arrow?
when text class
is closed, remove after
arrow class
if text class
is shown, then add the arrow?
I tried, but seems doesn't work
<div id="box"></div>
<div class="text"></div>?
$(document).ready(function () {
$('#box').click(function () {
$('.text').slideToggle('slow');
});
});
#box{
height:40px;
width:100px;
background:red;
}
#box:hover{background:blue;}
#box:after{
content: "";
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}
#box:hover:after{
border-top-color: blue;
}
.text{
display:none;
height:40px;
width:100px;
background:#fd0;
margin-top:20px;
}
http://jsfiddle/zfQvD/16/
Is that possible to use jQuery to add the styled after
arrow?
when text class
is closed, remove after
arrow class
if text class
is shown, then add the arrow?
I tried, but seems doesn't work
- Can you reword what you are trying to acplish? A little lost by your wording – AJak Commented Nov 14, 2012 at 2:26
- 1 You can't style pseudo elements in JavaScript because they don't actually exist in the DOM. Use a regular tag instead.. – elclanrs Commented Nov 14, 2012 at 2:29
- just add the styled arrow when /expand/, remove arrow when not /expand/ – olo Commented Nov 14, 2012 at 2:29
- possible duplicate of Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) – Blazemonger Commented Feb 3, 2014 at 20:08
1 Answer
Reset to default 5As per @elclanrs ment, you can't add pseudo elements with JS. What you can do, however, is declare them in your CSS to be only shown when a parent element has a specific class, and then toggle this class with JS, like this:
#box.expanded:after {
content:'';
height: 10px;
position: absolute;
width: 0;
margin-top:40px;
margin-left:40px;
border: 10px solid transparent;
border-top-color: red;
}
You also have to add a line to your JS for this class to be added upon clicking the box:
$('#box').click(function () {
$(this).toggleClass('expanded');
$('.text').slideToggle('slow');
});
See the example here: http://jsfiddle/zfQvD/17/