I am trying to toggle both the icon and the button text on a button and each function works independently, but they will not work when run consecutively. Seems that the function to toggle the button text is removing my icon altogether.
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
List View
</button>
$("#toggle-list-details").click(function() {
$(this).text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};
When you do
$(this).text(function(i, text){
this reffers to <button type="button" id="toggle-list-details">, so it replaces all inner content with plain text.
To avoid this, you can do smth like this:
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
<span class="text">List View</span>
</button>
$("#toggle-list-details").click(function() {
$(this).find('span').text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};
Related
This collapse code works fine but I wish to get back the same message when a user does a un-collapse by clicking the link.
Code:
<div class="expandContent searchfont"> <i class='icon-search' title='Click here to search.'></i> SEARCH CANDIDATES</div>
<div class="showMe" style="display:none">
<script type="text/javascript">
$(document).ready(function() {
$(".expandContent").click(function() {
$(".showMe").slideToggle("slow");
if ($("#toggleText").text() === "SEARCH") {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> -</span>`);
} else {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> FILTER SEARCH</span>`);
}
});
});
</script>
All I want is when I use click on Filter Search then the div uncollapse and message should be search candidates.
Everything was fine except
$("#toggleText").text() === "SEARCH" will be changed by $("#toggleText").text() === " FILTER SEARCH"
In case the text is filter search, the next text will be changed in search candidate
$(document).ready(function() {
$(".expandContent").click(function() {
$(".showMe").slideToggle("slow");
if ($("#toggleText").text() === " FILTER SEARCH") {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i>SEARCH CANDIDATES<span id="toggleText"> -</span>`);
} else {
$(".expandContent a").html(`
<i class="icon-search" title="Click here to search."></i><span id="toggleText"> FILTER SEARCH</span>`);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="expandContent searchfont"> <i class='icon-search' title='Click here to search.'></i> SEARCH CANDIDATES</div>
<div class="showMe" style="display:none">Below content</div>
I am trying to change the text of a button when clicked and back to normal when clicked again. The button is using a font awesome icon so figured I would try using this.html instead of this.text, but for some reason it is not recognising the HTML I am indicating?
If I change the HTML on the else statement then it will change on click which is what makes me think it is an issue with it not recognizing my HTML.
I know it might be something really stupid but cant seem to figure it out.
$(document).ready(function(){
$("#submitbutton").on("click", function(){
if($(this).html()=="View code <i class=\"fas fa-chevron-right fa-xs\"></i>")
{
$(this).html("Close code <i class=\"fas fa-chevron-right fa-xs\"></i>");
} else {
$(this).html("View code <i class=\"fas fa-chevron-right fa-xs\"></i>");
}
})
});
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
onclick="retrieveData()"
>View code <i class="fas fa-chevron-right fa-xs"></i></button>
</div>
It seems as if the only change is the text ( "View || Close ") so you can simply put that variable text in spans - one with a display: none styling and then on the click - toggle the visibility of each.
$(document).ready(function(){
$("#submitbutton").on("click", function(){
$(this).find('span').toggle();
})
});
#submitbutton span:nth-of-type(2) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
>
<span>View</span>
<span>Close</span>
code <i class="fas fa-chevron-right fa-xs"></i>
</button>
</div>
I have a Javascript function that prints "like" and "Unlike" like this:
$(".liketoggle").click(function () {
$(this).text(function(i, v){
return v === 'Like' ? 'Unlike' : 'Like'
})
});
I have an HTML tag that shows a heart in an tag as:
<i class="fas fa-heart"></i>
How can I show the heart icon next to the like/unlike button. This is the HTML so far:
<button type="submit"
class="btn btn-custom btn-sm liketoggle"
name ="like">Like
</button>
<i class="fas fa-heart"></i>
How I can write to the JS to be included when toggling it?
Similar Function here: http://jsfiddle.net/dFZyv/ but same issue
I have the following piece of code:
<ul class="ul" id="selected_conditions">
<li data-field="asset_locations_name" data-condition="in">
<i class="fa fa-minus-circle delete_condition" aria-hidden="true" title="Click to remove this condition from the list"></i> WHERE asset_locations_name IN(
<span class="condition_item" data-id="1213381233">
<i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1213381233
</span>,
<span class="condition_item" data-id="1212371897">
<i class="fa fa-minus-circle delete" title="Click to remove this item from the list" aria-hidden="true"></i> 1212371897
</span> )
</li>
</ul>
Each time I click on the little icon .delete I should remove the current value and I was able to achieve that with the following code:
$(function() {
$('#selected_conditions').on('click', '.delete', function(ev) {
var item_id = $(this).parent().data('id');
$('.condition_item[data-id="'+ item_id +'"]').remove();
});
});
But the code above has two problems: if I remove any item the symbol , isn't removed and that's wrong as an a second one I can't have an emtpy () string, so:
How do I remove the , so I not end up with a bad string like (,1213381233) or (1213381233,)?
Any help? I have leave you a Fiddle to play with. This is a WIP so if you have a suggestion or better solution feel free to add it to your answer.
Instead of hard-coding the comma(s), I'd use CSS :before to add commas only when there's more than one item in a row.
.condition_item+.condition_item:before {
content: ", "
}
https://jsfiddle.net/8184ok2e/2/
I'm using the 'data-toggle'-option from Bootstrap for a button. In the button I have a with glypicons and sometext. However, when you click on the text it works, but when you click on the glyphicon it doesn't trigger the data-toggle.
Since the data-toggle does not work in JSFiddle I cannot post a link to it.
HTML:
<button type="button" id="showHide" class="btn btn-default" data-toggle="button"><span class="glyphicon glyphicon-eye-open"></span> show</button>
JavaScript:
document.getElementById("showHide").onclick = function () {
if ($("#showHide").text() == " show") {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
document.getElementById("showHide").blur();
} else {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
document.getElementById("showHide").blur();
}
}
I've looked online but haven't found a solution or someone with the same problem.
It appears the span is being replaced before the toggle event is propogated. You can use the button method to activate the toggle rather than the data attribute.
<button type="button" id="showHide" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> show</button>
document.getElementById("showHide").onclick = function () {
if ($("#showHide").text() == " show") {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-close\"></span> hide";
jQuery("#showHide").button('toggle');
document.getElementById("showHide").blur();
} else {
document.getElementById("showHide").innerHTML = "<span class=\"glyphicon glyphicon-eye-open\"></span> show";
jQuery("#showHide").button('toggle');
document.getElementById("showHide").blur();
}
}
View Fiddle