Looking for a CSS solution to change the appearance of a triangle when the .hide class is activated within my markup.
I attempted using a pseudo-element like so:
summary:before {
content: '\25BC';
}
summary:before + .hide {
content: '\25BA';
}
However, this method did not work as expected. The arrow failed to update despite seeing summary:before + .hide in DevTools.
Any suggestions on achieving the desired effect without resorting to JavaScript, relying solely on CSS?
var $div = $('summary');
$div.on('click', function() {
$('ul').toggleClass('hide');
});.wrapper {
width: 300px;
height: 300px;
background-color: #ecf0f1;
}
.details {
outline: none;
background-color: #95a5a6;
cursor: pointer;
position: relative;
}
summary {
outline: none;
margin-left: 30px;
}
summary:before {
content: '\25BA';
font-size: 12px;
position: absolute;
top: 2px;
left: 13px;
}
summary:before + ul.hide {
content: '\25BC';
font-size: 12px;
position: absolute;
top: 2px;
left: 13px;
}
.hide {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="details">
<summary>Sample</summary>
<ul class="hide">
<li>
<input type="radio" checked/>
<label>Label 1</label>
</li>
<li>
<input type="radio" />
<label>Label 2</label>
</li>
<li>
<input type="radio" />
<label>Label 3</label>
</li>
</ul>
</div>
</div>