Allow me to propose two solutions:
The initial approach involves utilizing the attr() for setting the content: '' parameter within the pseudo-class :before. Implement this in your CSS:
.faquestion::before {
content: attr(before-content);
...
}
Additionally, include a supplementary jQuery script that enables you to switch between the icons - and +:
$(element).attr("before-content", function (index, attr) {
return attr == " +" ? " - " : " + ";
});
Set the default icon as +:
$(document).ready(function () {
$(".faquestion").attr("before-content", " + ");
});
Snippet:
.faquestion {
cursor: pointer;
color: #fff;
border-left: 12px solid rgb(3, 59, 76);
border: 2px solid #fff9e6;
background-color: rgb(3, 59, 76);
border-radius: 4px;
padding: 10px 10px 10px 15px;
vertical-align: bottom;
}
.faquestion:hover {
color: #000;
border: 2px solid rgb(0, 87, 152);
background-color: #ddcba4;
}
.faquestion::before {
content: attr(before-content);
padding-right: 8px;
font-weight: bold;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$(".faquestion").attr("before-content", " + ");
});
function toggler(element) {
$(element).next().toggle();
$(element).attr("before-content", function (index, attr) {
return attr == " +" ? " - " : " + ";
});
}
</script>
<p class="faquestion" onclick="toggler(this);"><strong>How do I go to there?</strong></p>
<p class="" id="answer1" style="padding-left: 30px; display: none;">Follow the yellow brick road.</p>
<p class="faquestion" onclick="toggler(this);"><strong>What is a virtual experience?</strong></p>
<p class="" id="answer2" style="padding-left: 30px; display: none;">The Virtual experiences is...</p>
The alternative solution presents a more concise method compared to the first one. It suggests using a class.
You'll need a rule containing a - symbol for your content: ''. Incorporate this into your CSS:
.faquestion.minus::before {
content: " \002D ";
}
Introduce a class toggle mechanism using the toggleClass() method. Like so:
$(element).toggleClass("minus");
Snippet:
.faquestion {
cursor: pointer;
color: #fff;
border-left: 12px solid rgb(3, 59, 76);
border: 2px solid #fff9e6;
background-color: rgb(3, 59, 76);
border-radius: 4px;
padding: 10px 10px 10px 15px;
vertical-align: bottom;
}
.faquestion:hover {
color: #000;
border: 2px solid rgb(0, 87, 152);
background-color: #ddcba4;
}
.faquestion::before {
content: " \ff0b ";
padding-right: 8px;
font-weight: bold;
}
.faquestion.minus::before {
content: " \002D ";
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function toggler(element) {
$(element).next().toggle();
$(element).toggleClass("minus");
}
</script>
<p class="faquestion" onclick="toggler(this);"><strong>How do I go to there?</strong></p>
<p class="" id="answer1" style="padding-left: 30px; display: none;">Follow the yellow brick road.</p>
<p class="faquestion" onclick="toggler(this);"><strong>What is a virtual experience?</strong></p>
<p class="" id="answer2" style="padding-left: 30px; display: none;">The Virtual experiences is...</p>