I would like to have a jquery button event where the first time a button is clicked a div (with class .explanation) appears and the text changes and the second time it is clicked the div is hidden and the text changes back to the original text. I can do the first part but the second part does not work. In the below changing - (toggleClass("hidden") - to - .fadeOut... - doesn't work either so I think I have got something wrong with if and else. Thanks in advance
$("button:nth-of-type(1)").click(function() {
if (this.text = "Read Explanation") {
$(".explanation").fadeIn("slow", function() {});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
$(".explanation").toggleClass("hidden");
}
});
change
if(this.text = "Read Explanation") {
to
if($(this).text() === "Read Explanation") {
a demo:
$("button:nth-of-type(1)").click(function() {
if ($(this).text() === "Read Explanation") {
//$(".explanation").fadeIn("slow", function() {});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
}
$(".explanation").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><button>Read Explanation</button></div>
<div class="explanation hidden">explanation</div>
$(this) is jquery object with text() attribute while this is pure js
object without text or text() attribute in this case.
= is assignment operator while === is Comparison operators
There are several issues in your code:
this should be $(this)
text should be text()
You are using assignment operator in if condition. It should be comparison operator == or strict comparison operator ===
You can toggle the hidden class outside if-else block
$( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
}
$(".explanation").toggleClass("hidden");
});
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='explanation hidden'>Some explanation</div>
<button>Read Explanation</button>
you can't make decisions based on data that can change.
if the text of the button changes, you'll need to change your code.
by this way, if the text of the button changes, you need to change your data.
This is not the best option, but it may works.
https://jsfiddle.net/foo8drb2/8/
var data = {
1: "Read Explanation",
2: "Hide Explanation"
}
// asssign default id to the text
var id_text = 1; //1 id for "Read Explanation"
// add data attribute to the button
$("button:nth-of-type(1)").attr("data-id-text", id_text);
// event
$("button:nth-of-type(1)").click(function () {
if ($(this).attr("data-id-text") == 1) {
//change id_text -> 2 for "Hide Explanation"
id_text = 2;
// show hide options
$(".explanation").fadeIn();
} else {
//change id_text -> 1 for "Read Explanation"
id_text = 1;
// show hide options
$(".explanation").fadeOut();
}
// change data id
$(this).attr("data-id-text", id_text);
// update text
$(this).text(data[id_text]);
});
Thanks everyone. This seems to be the simplest / close to what I had. I changed as suggested by Ankit:
this to $(this)
text to text()
= to ==
Using - fade out - instead of - hide - helped
$( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
$(".explanation").fadeIn( "slow", function() {
});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
$(".explanation").fadeOut( "slow", function() {
});
}
});
Related
guys
I have a following HTML code with wrap (notice-wrap):
<div class="notice-title">
Title
</div>
<div class="notice-content">
Content text
</div>
<div class="notice-toggle" value="Hide" onclick="toggle()">
<img src="../img/icon_rollout.png">
</div>
And Toggle Script
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
When i'm clicking on the toggle, open once all the items. How to make the opening only that element which i choose?
P.S. I also use Angular
Thanks in advance!
Maybe you can just change this:
function toggle() {
var newStatus = $('.notice-toggle').val() === "Hide" ? "Show" : "Hide";
$('.notice-toggle').val(newStatus);
if (newStatus == "Show") {
$("div.notice-content").css('overflow','hidden');
$("div.notice-content").css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
$("div.notice-content").css('overflow','visible');
$("div.notice-content").css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
to:
function toggle() {
var noticeToggleElement = $(this);
var newStatus = noticeToggleElement.val() === "Hide" ? "Show" : "Hide";
noticeToggleElement.val(newStatus);
if (newStatus == "Show") {
noticeToggleElement.css('overflow','hidden');
noticeToggleElement.css('height','80px');
$("div.notice-wrap").css('height','187px');
}
else {
noticeToggleElement.css('overflow','visible');
noticeToggleElement.css('height','100%');
$("div.notice-wrap").css('height','100%');
}
}
As you should have the context of the element you toggle on with the mouse click.
As you're using jQuery, should be better if you remove the onclick from the HTML tag and make the bind in your javascript code, on a function that is executed on document ready:
$(function(){
$('div.notice-content').click(toggle);
})
But this is just a plus.
What you should do first is move that styling from js to css,
and have additional variations of your classes, for example:
.notice-title--toggled {
...
}
.notice-content--toggled {
...
}
.notice-toggle--toggled {
...
}
Now you have good separation of concerns, and your toggle function could just toggle classes for those elements.
Also you should put this toggle click handler on document ready, so final result would be:
$(function) {
$('.notice-toggle').click(function() {
$('.notice-title').toggleClass('notice-title--toggled');
$('.notice-content').toggleClass('notice-content--toggled');
$('.notice-toggle').toggleClass('notice-toggle--toggled');
});
}
I have a table which has more/less functionality in the row level. I need to include Expand/Collapse All option in the table level so it will be easier to expand all the rows at once.
In my current code, row level and table level expanding works fine on it's individual.
But when I expand using Expand All link, row level more/less links should also act together. Currently when Expand All link is clicked, row level more/less link still shows as More link but it should get changes to Less link.
Here is my code,
var minimized_elements = $('.grid_moretext span');
minimized_elements.each(function(){
var t = $(this).text();
if(t.length < 55) return;
$(this).html(
t.slice(0,55)+'<span>... </span>'+
'<span class="more_text" style="display:none;">'+ t.slice(55,t.length)+' </span>'
);
});
$('a.tr_expand').click(function(event){
event.preventDefault();
$(this).parent().siblings().find("span.more_text").toggle();
if ($(".tr_expand").text() == "More") {
$(".tr_expand").text("Less");
}
else {
$(".tr_expand").text("More");
}
});
$('a.more', minimized_elements).click(function(event){
event.preventDefault();
$(this).hide().prev().hide();
$(this).next().show();
});
$('a.less', minimized_elements).click(function(event){
event.preventDefault();
$(this).parent().hide().prev().show().prev().show();
});
$('a.expand_all').click(function(event){
event.preventDefault();
$(this).next().find(".grid_moretext span.more_text").toggle();
if ($(".expand_all").text() == "Expand All") {
$(".expand_all").text("Collapse All");
}
else {
$(".expand_all").text("Expand All");
}
});
DEMO
I have update a working fiddle with collapse
I have made the following changes:
Use $(this) to set the clicked expand link text rather than the whole class selection ;
$('a.tr_expand').click(function(event){
event.preventDefault();
$(this).parent().siblings().find("span.more_text").toggle();
// console.log($(".tr_expand").text());
if ($(this).text() == "More") {
$(this).text("Less");
}
else {
$(this).text("More");
}
});
In the expand all button, loop through the expand links and simply trigger the click of the link if it has 'More' text, if the row is already expanded, the toggle will collapse it again which was not the expected behavior.
$('a.expand_all').click(function(event){
event.preventDefault();
$('a.tr_expand').each(function(){
if($(this).text() == "More" && $('a.expand_all').text() == "Expand All" )
{
$(this).trigger('click');
}
else if($(this).text() == "Less" && $('a.expand_all').text() == "Collapse All" )
{
$(this).trigger('click');
}
});
if ($(this).text() == "Expand All") {
$(this).text("Collapse All");
}
else {
$(this).text("Expand All");
}
});
DEMO
Two things
One
$('a.tr_expand').click(function(event){
event.preventDefault();
$(this).parent().siblings().find("span.more_text").toggle();
//use $(this) to target current anchor element and check its text with .html
if ($(this).html() == "More") {
$(this).html("Less");
}
else {
$(this).html("More");
}
});
Two
Inside expand_all event click change the html again based on current value
$('a.expand_all').click(function(event){
event.preventDefault();
$(this).next().find(".grid_moretext span.more_text").toggle();
var elem=$(this).next().find('.tr_expand')
if(elem.html()=="More")//check for html again
elem.text('Less');
else
elem.text('More');
});
UPDATE
DEMO
Add a class to tr_expand while clicking on itself and on Expand All to identify whether it has been already expanded or collapsed as below:
$('a.tr_expand').click(function(event){
event.preventDefault();
var elem=$(this).parent().siblings().find("span.more_text");//store reference to element's more_text
elem.toggle();//toggle it
$(this).toggleClass('expand');//toggleClass expand
if ($(this).html().trim() == "More") {
$(this).html("Less");
}
else {
$(this).html("More");
}
});
Next on Expand_all click Loop through each tr_expand and its siblings and toggle it based on presence of class on tr_expand as below:
$('a.expand_all').click(function(event){
event.preventDefault();
$('.tr_expand').each(function(){
var elem=$(this);
if(!elem.hasClass('expand'))//check if element is already expanded
{
//if no find all its `grid_moretext` element and toggle its span.more_text
elem.closest('td').siblings(".grid_moretext").each(function(){
$(this).find("span.more_text").toggle();
});
if(elem.html()=="More")
{
$('a.expand_all').text('Collapse All')
elem.text('Less');
}
else
{
$('a.expand_all').text('Expand All')
elem.text('More');
}
}
else
elem.toggleClass('expand'); //if expand is not there add it again
});
});
Use this so that it will refer to the clicked More link.
if ($(this).text() == "More") {
$(this).text("Less");
}
else {
$(this).text("More");
}
Here is the updated fiddle - http://jsfiddle.net/z9hzstzc/1/ . I have changed the condition check for $('tr.expand') by putting it in a loop.
I have did following changes in your Fiddle
$('a.expand_all').click(function(event){
if ($(".tr_expand").html() == "More") {
$(".tr_expand").html("Less");
}
else {
$(".tr_expand").html("More");
}
event.preventDefault();
$(this).next().find(".grid_moretext span.more_text").toggle();
});
Here is DEMO
Using this jQuery:
$('a.tr_expand').text(function (i, t) {
return t == 'More' ? 'Less' : 'More';
});
you can easily achieve what you're seeking.
Here I've updated your JSFiddle
// For individual click events
$('a.tr_expand').click(function (event) {
event.preventDefault();
$(this).parent().siblings().find("span.more_text").toggle();
$(this).text(function (i, t) {
return t == 'More' ? 'Less' : 'More';
});
});
//For group toggle
$('a.expand_all').click(function (event) {
event.preventDefault();
$(this).next().find(".grid_moretext span.more_text").toggle();
$('.tr_expand').text(function (i, t) {
return t == 'More' ? 'Less' : 'More';
});
});
It will do the trick for you.
I have 6 buttons and I wish to create a master button which will turn all the other buttons on or off. I managed to do that but ran into a problem when the master button would turn a button off if it was already on. I need this button to turn all the buttons on or off regardless of its previous state.Button 7 will be acting as master button. Thank you for taking the time to read this, any help would be much appreciated.
//master button
function button7(){
currentvalue = document.getElementById('button7').value;
if(currentvalue == "Off"){
document.getElementById("button7").value="On";
}else{
document.getElementById("button7").value="Off";
}
}
$(document).ready(function(){
$('#button7').on('click', function(){
$('#button7').toggleClass('on');
$('#button1').toggleClass('on');
$('#button2').toggleClass('on');
$('#button3').toggleClass('on');
$('#button4').toggleClass('on');
$('#button5').toggleClass('on');
$('#button6').toggleClass('on');
if(currentvalue == "Off"){
alert("off")
}
else{
alert("on")
}
});
});
//regular button
function button1(){
currentvalue = document.getElementById('button1').value;
if(currentvalue == "Off"){
document.getElementById("button1").value="On";
}else{
document.getElementById("button1").value="Off";
}
}
$(document).ready(function(){
$('#button1').on('click', function(){
$(this).toggleClass('on');
if(currentvalue == "Off"){
alert("off")
}
else{
alert("on")
}
});
});
If you want to set all the buttons to a specific state, don't use toggleClass() which, as the name itself suggests, is used to toggle class-names. Instead:
$('#button7').on('click', function(){
// select all the elements by their id:
$('#button1,#button2,#button3')
// remove both classes:
.removeClass('on off')
// add the class that the clicked-button currently represents:
.addClass(this.value)
// whatever Boolean the button currently represents,
// switch to the other option:
.val(this.value === 'On' ? 'Off' : 'On');
});
References:
addClass().
removeClass().
val().
Toggle the class on the button, the check if it has that class and use that to add or remove the class on all the other buttons. Using a boolean value as the second parameter to toggleClass will add or remove the class according to the boolean, not the presence of the class.
$(document).ready(function(){
$('#button7').on('click', function(){
$('#button7').toggleClass('on');
var currentvalue = $('#button7').hasClass('on');
$('#button1').toggleClass('on', curentvalue);
$('#button2').toggleClass('on', curentvalue);
$('#button3').toggleClass('on', curentvalue);
$('#button4').toggleClass('on', curentvalue);
$('#button5').toggleClass('on', curentvalue);
$('#button6').toggleClass('on', curentvalue);
if (currentvalue){
alert("on")
} else {
alert("off")
}
});
});
I am trying to click a button and toggle series on and off. I do not understand why, but my button's HTML is showing a function and and not its attributes:
$button.click(function() {
alert($('#button').text);
if ($button.text == 'Show previous years')
{
for (var i=0;i<chart.series.length;i++)
{
if (chart.series[i].name.indexOf("13/14")== false)
{
chart.series[i].show();
}
alert($button.html);
$button.html('Hide previous years');
}
} else {
for (var i=0;i<chart.series.length;i++)
{
if (chart.series[i].name.indexOf("13/14")>0)
{
chart.series[i].show();
}
$button.html('Show previous years');
}
}
});
Please take a look: http://jsfiddle.net/pzh20/6cQ2N/8/
You're using .text which is a function.
Replace .text by .text() and it will be the text()'s return value, which is the string you're looking for.
http://jsfiddle.net/6cQ2N/9/
In this edited fiddle, you'll get a good alert value since I changed the .text to .text()
I have a selected box with 5 values. I'm trying to fadeIn inputs of what is selected in the box. For example: If input1 is selected, fade in input1 on click.
Here is what I'm trying to do:
$(document).ready(function(){
$('.btn').click(function() {
if($("#selectbox").value == 'Input1') {
$(".input1").show();
} else if($("#selectbox").value == 'Input2') {
$(".input2").show();
} else if($("#selectbox").value == 'Input3') {
$(".input3").show();
} else if($("#selectbox").value == 'Input4') {
$(".input4").show();
} else if($("#selectbox").value == 'Input5') {
$(".input5").show();
}
}
});
And here is a NOT working fiddle:
http://jsfiddle.net/rzMHJ/
Your code have two errors and that's why its not working.
$("#selectbox").value should be $("#selectbox").val()
you have not closed your click event with );
Also its much better to use switch case in this example.
Working Demo: http://jsfiddle.net/naveen/Zn2yy/
Update (based on Nick Cravers comment)
For this particular scenario you could simplify code a lot like this.
Demo: http://jsfiddle.net/nick_craver/BWacA/
There are two problems with your code that is causing it to fail.
First, replace .value with the jQuery function val().
Second, add ); to the second to last } at the end.
Here is working refactored code:
$(document).ready(function() {
$('.btn').click(function() {
var show = "." + $("#selectbox").val().toLowerCase();
$(show).fadeIn();
});
});