How do I change toggle id to change “before” css class? Using Unicode

I have a list of FAQ Questions, with some CSS. What I am wanting to do is change the uni-code before to go from a + to – so from content:" ff0b "; to content:" 02D " Here is my code and css and HTML:

.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;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function toggler(divId) {
    $("#" + divId).toggle();
}
</script>
<p class="faquestion" onclick="toggler('answer1');"><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('answer2');"><strong>What is a virtual experience?</strong></p>
<p class="" id="answer2" style="padding-left: 30px; display: none;">The Virtual experiences is...</p>

I feel like I have to add something to toggle code, but not quite sure what to add. Please help! https://jsfiddle.net/nr3tvaf2/

Answer

I can give two solutions.

The first solution is to use an attr() for the content: '' rule, pseudo-class :before. Do this in your css:

.faquestion::before {
    content: attr(before-content);
    ...
}

And add an additional jquery code that allows you to change the icon from to + according to the switch principle:

$(element).attr("before-content", function (index, attr) {
    return attr == " uff0b " ? " u002D " : " uff0b ";
});

Also, initialize the icon to + by default:

$(document).ready(function () {
    $(".faquestion").attr("before-content", " uff0b ");
});

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", " uff0b ");
    });
    function toggler(element) {
        $(element).next().toggle();
        $(element).attr("before-content", function (index, attr) {
            return attr == " uff0b " ? " u002D " : " uff0b ";
        });
    }
</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 second solution is shorter than the first. The given solution is to use the class.

You need a rule with a sign in your content: ''. Add this to your css:

.faquestion.minus::before {
    content: " 02D ";
}

And add a class switch with the toggleClass() method. Like this:

$(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: " 02D ";
}
<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>