Is there a way to switch the button text and class when toggling? Currently, the default settings show a blue button with "Show" text, but upon click it should change to "Hide" with a white button background.
<button class="btn exam-int-btn">Show</button>
Check out the jsFiddle example here.
Try using <span>
<button class="btn toggle-btn">
<span>Click Me</span>
<span style="display:none">Hide Me</span>
</button>
CSS:
.highlight {background-color:#ffd700 !important;color:#333}jQuery:
$(document).ready(function() {
$('button').on('click',function() {
$(this).toggleClass('highlight').find('span').toggle();
});
});
fiddle: https://jsfiddle.net/abc123xyz/
Take a look at the fiddle provided below:
Is this what you are searching for?
http://jsfiddle.net/yogesh078/Bnuy7/2174/
var toggleClass = function() {
var button= document.getElementById('btnEnroll');
var currentClass = button.getAttribute("class");
if(currentClass=="exam-int-btn") {
button.className = "white";
}
else{
button.className = "exam-int-btn";
}
};
$('#btnEnroll').click(toggleClass);
$('button').on('click',function(){
if(!$(this).hasClass('red')){
$(this).addClass('red').text('Enrolled');
}else{
$(this).removeClass('red').text('Enroll');
}
}).exam-int-btn {
width: 100px;
line-height: 2.5em;
justify-content: center;
padding: 0;
font-weight: 400;
color: #ffffff;
background-color: #2196F3;
text-align: center;
border-radius: 4px;
box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
transition: all .3s ease;
border: 1px solid transparent;
cursor: pointer;
}
.exam-int-btn.red{
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>To achieve this using jQuery, follow the steps below:
$('#my-btn').click(function(){
//change text
$(this).text('updated text goes here');
//change text & background color
$(this).css({
'color' : '#000',
'background-color' : '#fff'
});
}).exam-int-btn {
width: 100px;
line-height: 2.5em;
justify-content: center;
padding: 0;
font-weight: 400;
color: #ffffff;
background-color: #2196F3;
text-align: center;
border-radius: 4px;
box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
transition: all .3s ease;
border: 1px solid transparent;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="my-btn" class="btn exam-int-btn">Enroll Now</button>Hopefully this information proves to be useful
$('button').on('click',function(){
$(this).text($(this).text() == "Enroll" ? "Enrolled": "Enroll");
$(this).toggleClass('btn-toggle')
}).exam-int-btn {
width: 100px;
line-height: 2.5em;
justify-content: center;
padding: 0;
font-weight: 400;
color: #ffffff;
background-color: #2196F3;
text-align: center;
border-radius: 4px;
box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
transition: all .3s ease;
border: 1px solid transparent;
cursor: pointer;
}
.btn-toggle{
background-color:white;
color:#2196F3;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>Here is a simple solution that I found to be quite effective:
var flag = false; //initially set to false, button text and background color are blue
$("button").click(function(e){
e.preventDefault();
if(flag==true){
flag=false;
$(this).text("Show"); //change button text to Show
$(this).css("background-color","blue"); //change background color to blue
}else{
flag=true;
$(this).text("Hide"); //change button text to Hide
$(this).css("background-color","white"); //change background color to white
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="background-color:blue">Show</button>Are you interested in using a code snippet similar to the one provided below?
$('button').on('click',function(){
$(this).toggleClass("show hide");
}).exam-int-btn {
width: 100px;
line-height: 2.5em;
justify-content: center;
padding: 0;
font-weight: 400;
color: #ffffff;
background-color: #2196F3;
text-align: center;
border-radius: 4px;
box-shadow: 5px 5px 15px 0 rgba(46,61,73,.15);
transition: all .3s ease;
border: 1px solid transparent;
cursor: pointer;
}
.show{
background-color: #2196F3;
}
.hide{
background-color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn exam-int-btn">Enroll</button>Clickable Element
<button class="click">Click Me</button>
JavaScript / jQuery
`$( ".click" ).click(function() {
$( this ).removeClass( "click" ).addClass("unclick");
$(this).html('Unclick');
});
$( ".unclick" ).click(function() {
$( this ).removeClass( "unclick" ).addClass("click");
$(this).html('Click Me');
});`
CSS - Customize Your CSS Here
I am facing an issue with my LottieFiles (JSON) displaying a black background when imported into my NextJS project. Despite trying to set background='transparent' on both the Player and parent div, the problem persists. I made sure to export my ...
Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...
Currently, I am in the process of writing functional tests for a Zend application. These tests are executed using PHPUnit and a wrapper called https://github.com/chibimagic/WebDriver-PHP In order to handle the extensive use of JavaScript and AJAX in the a ...
Below is a snippet of my code. I am attempting to update the state of data (which is contained within datasets) to a value defined by the user. constructor(props) { super(props); this.state={ value:'', set:[], coun ...
On my HTML page, I have two images and a textbox. I want the focus to shift between the images based on the first character entered in the textbox. For example, when the user types '3', the first image should be focused, and for '4', th ...
Is there a way to create an Invoice in HTML rather than a PDF-file and provide the user with an easy download link for the HTML-file? When I simply link to the HTML file, it only seems to be "temporarily downloaded" and viewed in the user's web brows ...
It's me again. I'm feeling really frustrated with this code, it's starting to get on my nerves. I don't mean to keep bothering you, but I finally figured out where the issue was in the code and now I just need a little help with the fin ...
I am currently using the PFBC (PHP form builder class (PFBC)) to generate a TextBox element on a page; However, when dealing with strings containing special characters, it does not properly convert them into normal characters: For example: $razao = "livi ...
Currently, I am in the process of creating a simple quiz application. While working on this project, I encountered an issue with linking a JS file in an HTML template. Even though I have confirmed that the path is correct, every time I run my node app, the ...
new Vue({ el: '#app', data() { return { terms: false, fullname:'', maxfullname: 10, mobile: '', maxmobile: 10, area: '', maxarea: 12, city: '', ...
I am looking to incorporate a popup window as a child of my primary asp.NET form. The popup window will allow users to input information using a dropdown list. When the popup window appears, it will take focus and disable the main window. ...
"Adding additional information to a URL that was previously included?" I apologize for the confusing title, but I can't find a better way to phrase it. Perhaps an example will make things clearer. Let's say I have URL 1: http://example.com/?v ...
Currently, I am working on a React component library that I want to integrate into a local project for testing purposes. My initial approach was to use npm link to connect the component library with my local project. However, during this process, I encount ...
Consider a scenario where you need to apply a CSS rule to a specific element within a collection that needs to be selected. <div ng-repeat="fragments" ng-click="makeSelected()"></div> $scope.fragments = [ {id: 6379, someProperty: "someValu ...
Users on a specific page must click a 'generate' button to create details for a record. When the button is clicked, an ajax request is triggered to generate the record, which may take some time. $("#generate_record_button").on("cl ...
My array consists of objects, each having the following structure: var car = { make: "", model: "", price: "" } I am attempting to iterate through each object and check if a specific property is defined in this manner: for (i = 0; i <= ...
In order to ensure that all necessary fields are selected, I need to implement a check upon clicking a button. Below is the HTML code: <input type="text" class="required-entry"> <input type="text" class="required-entry"> <input type="text" ...
I am attempting to modify the following html code: <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 256 256"> to this updated version: <svg xmlns="http://www.w3.org/2000/svg" width="30&q ...
Is it possible to activate a placeholder in a component that is outside of the current context? For example: <foreign-component [config]="someConfig" placeholder="somePlaceholder"></foreign-component> The <foreign-compo ...
I am using local storage to store username and password. However, I am encountering an issue where the active user is returning null after a certain line of code, and I am unsure why. console.log("I am the Active user: " + activeUser); const me ...