How to change the symbol when click in css?

change font awesome icon onclick css
bootstrap change icon on click
change font awesome icon onclick javascript
font awesome toggle icon onclick
change icon on click codepen
like and dislike icon in html
like dislike button html code
like button w3schools

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;
}

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>

How To Toggle Like and Dislike, Toggle between a like/dislike button with CSS and JavaScript. Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike):. Toggle (Hide/​Show)  The cursor property specifies the mouse cursor to be displayed when pointing over an element.

	   $(".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>

How To Create a Menu Icon, Animated Icon. Use CSS and JavaScript to change the menu icon to a "cancel/​remove" icon when it is clicked on: Step 1) Add  The :active selector is used to select and style the active link. A link becomes active when you click on it. Tip: The :active selector can be used on all elements, not only links.

: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>

How to change (-, +) symbol with a button in Bootstrap Accordion , How to hide div element by default and show it on click using JavaScript and Bootstrap ? How to Create ToDo App using HTML, CSS, JS and Bootstrap ? Example 1:Below example illustrate how to change symbol on button accordion  You need to include spaces in-between each special character code, otherwise the codes run together & CSS doesn’t know where the beginning & end of each code is located. Other Helpful Tips. Add line-breaks to CSS generated content; If you have any other ways to replace text with CSS, please let us know in the comments.

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 Cursor into a Hand Pointer on Hover using CSS, How to animate text color on mouse hover using CSS · Previous Page Next Page​. Advertisements. Font Awesome Icon Classes  Advanced - Create a link button with borders Another example of how to create link boxes/buttons. Change the cursor The cursor property specifies the type of cursor to display. This example demonstrates the different types of cursors (can be useful for links).

Bootstrap Snippet: Change button text & icon on click, things like variables and mixins to provide convenient abstractions. Learn more · Versions. None, Less, SCSS, Sass, Stylus, PostCSS HTML CSS JS Result  The list-style property is a shorthand property. It is used to set all the list properties in one declaration: list-style: square inside url ("sqpurple.gif"); Try it Yourself » When using the shorthand property, the order of the property values are: list-style-type (if a list-style-image is specified, the value of this property will be

Css plus sign shape, HTML symbol, character and entity codes, ASCII, CSS and HEX values for Plus Sign, However, it does not change form for a submit button on a form. For that, you Click-and-Drug this brush to any free-of-objects area on your artboard or​  There are many tutorials out there to change the selector drop down. Unfortunately, many of them involve placing an image over the entire element or creating your own image and sticking it in the corner. The below solution will work for all browsers and only take seconds to implement and only needs some CSS!

Swapping Out Text, Five Different Ways, If it does, change it back to the original. If not, to the swap text. This is what it looks like all done: $("button").on("click", function() { var el = $(this); if (el.text()  It explains How to use different signs (+,> and ~) in CSS selector and their differences. Before starting, let us take a sample code to understand the signs. It is the descendant selector. It will target all p tags within container div. It will target elements which are DIRECT children of a particular element.

Comments
  • I think this cannot be done in pure CSS. You either need to add a hidden <input type=checkbox> to your HTML and then add some pretty fancy CSS rules, or (probably best solution) to use JavaScript.
  • Hi VXp, it is a collapsible widget like the drop down menu.
  • Possible duplicate of css rotate a pseudo :after or :before content:""
  • After change to"V",so when I click back "test" can make it back to ">"
  • tell me for more help
  • Can make it after click it will remain ▼, then click back will change back to ►?
  • Tell me if it helps you
  • because I am using WordPress, so it will need using pure css.
  • I think you can use js in wordPress google search please