How to change the symbol when click in css?

Question

How can I change the symbol to "V" when click the widget title, after click back the widget title will change back the symbol ">".

image before click: link

This is my css that added after the widget title.

.widgettitle a::after {
    content: " >";
        font-size:16px;
        color:#d3db2c!important;
}

I think this cannot be done in pure CSS. You either need to add a hidden `` to your HTML and then add some pretty fancy CSS rules, or (probably best solution) to use JavaScript. — alx, May 24 '18 at 11:41
Possible duplicate of [css rotate a pseudo :after or :before content:""](https://stackoverflow.com/questions/9779919/css-rotate-a-pseudo-after-or-before-content) — Mehrad, May 24 '18 at 12:08

Vishal Panara · Answer 1 · 2018-05-24T12:25:39.363

1

    $(".greater").click(function(){
var test = $( this ).hasClass( "greater" );


if(test){
$( this ).removeClass( "greater" );   
  $( this ).addClass( "less" );   
}else{
  $( this ).removeClass( "less" );   
  $( this ).addClass( "greater" );   
  
}
});

.widgettitle .greater::after {
 content: " >";
 font-size:16px;
 color:#d3db2c!important;
}

.widgettitle .less::after {
 content: " v";
 font-size:16px;
 color:#d3db2c!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="widgettitle">
 <a href="#" class="greater">test</a>
</div>

edited May 24 '18 at 12:25

answered May 24 '18 at 11:42

Vishal Panara

233
3
15

After change to"V",so when I click back "test" can make it back to ">" – xuezheng May 24 '18 at 12:05

לבני מלכה · Answer 2 · 2018-05-24T12:26:18.627

1

:active mean when click on a

.widgettitle a::after {
    content: " ►";
}
.widgettitle a:active::after {
    content: " ▼";
        font-size:16px;
        color:black!important;
}

<div class="widgettitle">
<a href="#">back</a>
</div>

To your comment

Can make it after click it will remain ▼, then click back will change back to ►

Use toggle class

.widgettitle a::after {
    content: " ►";
}
.widgettitle .toggle::after {
    content: " ▼";
        font-size:16px;
        color:black!important;
}

<div class="widgettitle">
<a href="#" onclick="this.classList.toggle('toggle');">back</a>
</div>

edited May 24 '18 at 12:26

answered May 24 '18 at 11:44

לבני מלכה

15,925
2
23
47

tell me for more help – לבני מלכה May 24 '18 at 11:46
Can make it after click it will remain ▼, then click back will change back to ►? – xuezheng May 24 '18 at 12:11
Tell me if it helps you – לבני מלכה May 24 '18 at 12:37
because I am using WordPress, so it will need using pure css. – xuezheng May 24 '18 at 13:01
I think you can use js in wordPress google search please – לבני מלכה May 24 '18 at 13:07
Did u know how to add onclick="this.classList.toggle('toggle');" into my a href using wordpress. – xuezheng May 25 '18 at 07:41

Rajender Joshi · Answer 3 · 2018-05-24T12:08:17.870

You've to use checkbox hack to achieve this in pure CSS:

.link {
  text-decoration: none;
}
.checkbox {
  display: none;
}

.link:after {
  content: '►';
  margin-left: 5px;
  display: inline-block;
}

.checkbox:checked ~ .link:after {
  transform: rotate(90deg);
}

<div class="link-container">
    <label for="checkbox-1">Click me</label>
    <input type="checkbox" id="checkbox-1" class="checkbox">
    <a href="#" class="link"></a>
</div>

score 0 · Answer 4 · answered May 24 '18 at 12:17

Another solution with JavaScript. Hope its help.

.widgettitle a::after {
     content: " >";
     font-size:16px;
     color:#d3db2c!important;
    }

    .newclass a:focus::after {
       content: "v";
    }

<div id="wg" class="widgettitle">
     <a id="aid" href="#">test</a>
</div>

<script>

var aid = document.getElementById("aid");
var wg = document.getElementById("wg");
aid.onclick = function(){
 wg.classList.toggle("newclass");
}

</script>

How to change the symbol when click in css?

4 Answers4