So I am trying to change the the icon of my link for collapse section alongside with the text of the link.
Here is my code:
<a href="#collapse", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse">
<i class="material-icons" style="vertical-align: middle;">expand_more</i>
<label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>
<!--CONTENT-->
<script>
$(document).ready(function(){
$('#btn-collapse').on('click', function () {
var text=$('#btn-collapse').text();
if(text === "SECONDARY TEXT"){
$(this).text('PRIMARY TEXT');
$(this).find("i").html("expand_more");
} else{
$(this).text('SECONDARY TEXT');
$(this).find("i").html("expand_less");
}
});
});
</script>
I've been trying to find a solution for this for a while now, but nothing seems to work.. Text changes fine, but the icon completely vanishes on click. I don't think it is a major issue, but there is something I don't get with this. Any help here how to adjust?
$(document).ready(function() {
$('#btn-collapse').on('click', function() {
var thisElement = $(this);
var anchorLabelElement = thisElement.find('label');
if (anchorLabelElement.text() === "SECONDARY TEXT") {
anchorLabelElement.text('PRIMARY TEXT');
thisElement.find("i").text('expand_more');
} else {
anchorLabelElement.text('SECONDARY TEXT');
thisElement.find("i").text("expand_less");
}
});
});
<link href="https://cdn.jsdelivr.net/npm/material-design-icons-iconfont#6.7.0/dist/material-design-icons.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#collapse" , class="btn" , role="button" , data-bs-toggle="collapse" id="btn-collapse">
<i class="material-icons" style="vertical-align: middle;">expand_more</i>
<label style="vertical-align: middle;">PRIMARY TEXT</label>
</a>
Related
I am trying to change the icon from chevron-down to chevron-up when clicked. Currently, it shows "Categories" and "Hide" when clicked. I would like to have it say "Categories" the whole time. Is that possible?
Here is the code:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
<i class="fa fa-chevron-down"></i> Categories
</h1>
<div id="showhide" style="display:none;">
<ul>
<li>Hello World
</li>
</ul>
</div>
JS
function arata_ascunde(h1) {
var x = $('#showhide');
$(h1).find('i').remove();
if ($(h1).text().trim() == 'Categories') {
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Hide ');
x.fadeIn();
}
else {
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
x.fadeOut();
}
}
CodePen: https://codepen.io/chadwicked123/pen/porRoOq
Your "if condition" is on something that can't be detected if it will be the same in all conditions. So it's better to change your condition to something more specific, like the tag's class. like this :
function arata_ascunde(h1) {
var x = $('#showhide');
if ($(h1).find('i').hasClass('fa-chevron-down')) {
$(h1).find('i').remove();
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).append(' Categories');
x.fadeIn();
} else {
$(h1).find('i').remove();
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).append(' Categories');
x.fadeOut();
}
}
I changed a few things to make your result more beautiful. This code still can be improved (I'm not a front-end developer).
I used basic javascript and some logic to change the HTML based on a class
Here's the codepen for it - Link
Here's the edited JS file :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
Categories<i class="fa fa-chevron-down"></i>
</h1>
<div id="showhide" style="display:none;">
<ul>
<li>Hello World
</li>
</ul>
</div>
and the edited JS file
function arata_ascunde(h1) {
var x = $('#showhide');
$(h1).find('i').remove();
if (document.querySelector("h1").classList.contains("down")) {
$(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Categories ');
document.querySelector("h1").classList.remove("down")
x.fadeIn();
}
else {
$(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
document.querySelector("h1").classList.add("down")
x.fadeOut();
}
}
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 have the following code where I want to hide the closest grouping div. When I click the delete button, the div disappears but then comes back (added 600 so I could see this).
I have researched and found others saying to use event.preventDefault, return false; and add href”#!’ to the <a> tag. None seem to work. I changed the .hide() to .remove() and It works, but I won't just want to hide the div and use it later in the post model binding
#model Durendal.Core.ViewModels.RoleViewModel
<div class="d-flex flex-row grouping">
<div class="flex-grow-1" style="overflow-x: auto;">
#(Html.Kendo().DropDownListFor(m => m.Id)
.DataTextField("Name")
.DataValueField("Id")
.MinLength(3)
.HtmlAttributes(new { style = "width:100%;" })
.Height(290)
.Filter(FilterType.Contains)
.AutoWidth(true)
.DataSource(source =>
{
source.Custom()
.Transport(transport => transport
.Read(read => read
.Action("GetRoles", "DataApi", new { Area = "Shared" })));
})
)
</div>
<div class="">
<a href="#!" class="btn btn-sm btn-outline-danger waves-effect remove-grouping-button">
<i class="fas fa-times"></i>
</a>
</div>
<script type="text/javascript">
(function () {
$('.remove-grouping-button').click(function (event) {
event.preventDefault();
$(this).closest('.grouping').hide(600);
return false;
});
})();
</script>
</div>
This should hide the div but it reappears
Your code works - some other code must make it re-appear.
I only post this for demonstration and will delete it when you have seen it.
Please do not vote up or accept as answer and No need to vote down either
$(function() {
$('.remove-grouping-button').click(function(event) {
event.preventDefault(); // cancel anchor click
$(this).closest('.grouping').hide(600);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="d-flex flex-row grouping">
<div class="flex-grow-1" style="overflow-x: auto;">
Some Kendo dropdown
</div>
<div class="">
<a href="#!" class="btn btn-sm btn-outline-danger waves-effect remove-grouping-button">
<i class="fas fa-times"></i>
</a>
</div>
</div>
I have tried searching for a solution to this but can't seem to find a working answer. I may have missed something obvious.
I have a link to show the latest comments on a status. When the link is clicked the link data changes to "Close" (all good) but when close is then clicked to toggle the DIV the link data stays "Close", I want it to return to the original text (i.e 3 Comments).
The HTML:
<a class="comments" id="coms-<?php echo $statmainID; ?>" href="javascript:;"><i class="fa fa-comment"></i> <?php echo $numComs; ?> Comments</a>
<div id="comss<?php echo $statmainID; ?>" style="display:none;">Comments Here</div>
The JQuery:
$(function(){
$('body').on('click', '.comments', function(){
var cID =$(this).attr('id');
var theID = cID.split("-");
var divID = theID[1];
$('#comss'+divID).toggle("slide");
$('.comments'+divID).html('Close');
return false;
});
});
As always, any help from you guru's is always appreciated.
Kind regards.
You can use data attribute to store the original text. Then you can show it again.
HTML
<body>
<a class="comments" id="coms-1" href="javascript:;" data-id="comss1" data-text="4 Comments">
<i class="fa fa-comment"></i> 4 Comments
</a>
<div id="comss1" style="display:none;">Comments Here</div>
<a class="comments" id="coms-2" href="javascript:;" data-id="comss2" data-text="2 Comments">
<i class="fa fa-comment"></i> 2 Comments
</a>
<div id="comss2" style="display:none;">Comments Here</div>
</body>
JS
$(function(){
$('body').on('click', '.comments', function(){
var cID =$(this).attr('id');
var theID = cID.split("-");
var divID = theID[1];
$('#comss'+divID).toggle("slide");
var comments = $('#coms-'+divID);
if($(comments).text() === "Close"){
$(comments).html($(comments).data("text"));
} else {
$(comments).html('Close');
}
return false;
});
});
WORKING FIDDLE
var prevText=$(".comments").text();
$(".comments").click(function(){
if($(this).text().indexOf("Comments")>=0){
$(this).text("Close");
}
else
{
$(this).text(prevText);
}
return false;
});
UPDATE
FIDDLE WITH STATIC NUMBER OF COMMENTS
You can do it like following. Keep the original text in a data attribute and show it when on Close click.
$('body').on('click', '.comments', function() {
var cID = $(this).attr('id');
var theID = cID.split("-");
var divID = theID[1];
$('#comss' + divID).toggle("slide");
if ($(this).html().trim() != 'Close') {
$(this).data('text', $(this).html());
$(this).html('Close');
} else {
$(this).html($(this).data('text'));
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" />
<a class="comments" id="coms-1" href="javascript:;"><i class="fa fa-comment"></i> 1 Comments</a>
<div id="comss1" style="display:none;">Comments Here</div>
I want to update the click event of the hyperlink onClick and want to update the html inside the hyperlink in jquery
HTML
<a class=" save" href="javascript:void(0);" onclick="save_unsave('unsave','UID','ID',this);">
<div class="jopt_iconwrap" title="Unsave" alt="Unsave" >
<span class="saved"></span>
</div>
Unsave
</a>
Now onlick of save_unsave function i want to update the html design as below:
<a class=" save" href="javascript:void(0);" onclick="save_unsave('save','UID','ID',this);">
<div class="jopt_iconwrap" title="Save" alt="Save" >
<span class=""></span>
</div>
Save
</a>
I am trying to do this in the function:
jQuery
if(type == 'save')
{
var new_type = "'unsave'";
jQuery(elem_obj).html("");
jQuery(elem_obj).html('<a onclick="save_unsave('+new_type+','+uid+','+id+',this);" class="saved" href="javascript:void(0);"><div class="jopt_iconwrap" title="Unsave" alt="Unsave"><span class="saved"></span></div>Unsave</a>');
}
else if(type == 'unsave')
{
var new_type = "'save'";
jQuery(elem_obj).html("");
jQuery(elem_obj).html('<a onclick="save_unsave('+new_type+','+uid+','+id+',this);" class=" save" href="javascript:void(0);"><div class="jopt_iconwrap" title="Unsave" alt="Unsave"><span class="mico"></span></div>Save</a>');
}
How can we do this in jquery.Please help me in the i have the elmenet object in the function.
simply i will suggest you to use replaceWith() in place of .html() it will work properly for you.
$('a').click(function() {
if ($(this).hasClass('save')) {
$(this).removeClass('save').addClass('unsave');
$(this).text('Unsave')
$(this).attr('id','save')
} else {
$(this).removeClass('unsave').addClass('save');
$(this).text('Save')
$(this).attr('id','unsave')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class=" save">
<div class="jopt_iconwrap" title="Save" alt="Save">
<span class=""></span>
</div>
Save
</a>
Try this way
You can replace the onclick event, like this:
$('.save')[0].onclick = function() {
save_unsave('save', 'UID', 'ID', this);
}