change text on link when div is open - javascript

I have a button on my page
<button id="show1" class="morelinkblack">Find Out More</button>
When clicked it runs this code
$("#show1").click(function(){
$(".hidden-div1").slideToggle("slow");
});
Is there a way of changing the text to say "Close" instead of "find out more" while the div is visible?

You can do:
$("#show1").click(function(){
var that = $(this);
$(".hidden-div1").slideToggle("slow", function() {
if ($(this).is(":visible")) {
that.text("Close");
} else {
that.text("Find out more");
}
});
});
Based on the comments, the div could be opened or closed depending on where the user is directed from. A simple check in the DOM ready can set the text accordingly:
$(".hidden-div1").is(":visible") ? $("#show1").text("Close") : $("#show1").text("Find out more");

Maybe this :
$("#show1").click(function () {
var $div = $(this);
$(".hidden-div1").slideToggle("slow").promise().done(function () {
$div.text(function () {
return $(this).is(":visible") ? "Close" : "Find Out More"
});
});
});

Updated code
$("#show1").click(function() {
var el = $(this);
$(".hidden-div1").slideToggle("slow", function() {
if ($(this).css('display') == 'none') { // <- Updated here to check if div is close or open
el.text('Find Out More');
} else {
el.text('Hide More');
}
});
});
Update button text on document ready / page load
$(document).ready(function() {
if ($(".hidden-div1").css('display') == 'none') {
$("#show1").text('Find Out More');
} else {
$("#show1").text('Hide More');
}
});

Related

How to close a side menu by clicking outside of it

I have a side menu that is working good. I need help with when menu is opened user can close the menu by click outside it.
$(document).ready(function()
{
$('#service-icon-button').click(function() {
if($(this).css("margin-left") == "480px")
{
$('.service-menu').animate({"margin-left": '-=480'});
$('#service-icon-button').animate({"margin-left": '-=480'});
}
else
{
$('.service-menu').animate({"margin-left": '+=480'});
$('#service-icon-button').animate({"margin-left": '+=480'});
}
});
});
below the jsfiddle sample
https://jsfiddle.net/ahmedcom/1j0wr4pL/8/
You can use this code for close a side menu by clicking outside of it
$(document).click(function (e) {
var container = $("#service-icon-button");
if (e.target.id == container[0].id) // if the target of the click isn't the TOGGLE BUTTON...
{
if ($("#service-icon-button").css("margin-left") == "480px") {
$('.service-menu').animate({ "margin-left": '-=480' });
$('#service-icon-button').animate({ "margin-left": '-=480' });
}
else {
$('.service-menu').animate({ "margin-left": '+=480' });
$('#service-icon-button').animate({ "margin-left": '+=480' });
}
}
else {
if ($("#service-icon-button").css("margin-left") == "480px") {
$('.service-menu').animate({ "margin-left": '-=480' });
$('#service-icon-button').animate({ "margin-left": '-=480' });
}
}
});
You can add a listener and a condition to check if the menu is opened:
$(document).on("click" , function () {
if($('#service-icon-button').css("margin-left") === "480px")
{
$('.service-menu').animate({"margin-left": '-=480'});
$('#service-icon-button').animate({"margin-left": '-=480'});
}
});

button continually only fire once

If keep clicking the same buttons then only fire once. sample: https://jsfiddle.net/h4wgxofh/, For example, if click1 clicked then 2nd time or more times clicks should stop firing, the same as click2 however, if I click the same button, it always fires. Also I want links only trigger once but becomes available if other buttons being clicked. (considering if more buttons) Thanks
HTML
<div class="wrap">
Click1
Click2
</div>
Script
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
clicked = true;
if(clicked = true){
console.log($this.text());
clicked = false;
}
});
I'm probably missing something here, but why not just bind the event to every link in .wrap and unbind it on click like this :
$('.wrap a').on('click', function(){
console.log($(this).text());
$(this).unbind('click');
});
See this fiddle
Edit : after your comment on wanting one link to be rebound after cliking on another, even though it might not be the cleanest solution, this does the job :
var onclick = function(){
var $el = $(this);
console.log($el.text());
$('.wrap a').off('click', onclick);
$('.wrap a').each(function(id, link){
if($el.text() != $(link).text())
$(link).on('click', onclick);
});
}
$('.wrap a').on('click', onclick);
Fiddle again
See the following code
var clicked1 = false;
var clicked2 = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
var clickOrigin = $(this).text();
if(clickOrigin == 'Click1' && clicked1==false){
console.log("Click 1 clicked");
clicked1 = true;
}
if(clickOrigin == 'Click2' && clicked2==false){
console.log("Click 2 clicked");
clicked2 = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>
Also you can find the jsFiddle.
You need to Distinguish between two links(i used text here you may put whatever scenario ) see this example it may help:-
var clicked1 = 0;
var clicked2 = 0;
$('.wrap').on('click', 'a', function() {
var $this = $(this);
var $text = $(this).text();
//Click2
if ($text == 'Click1') {
clicked1 += 1;
if (clicked1 == 1) {
console.log($text);
} else {
return;
}
}
//Click2
if ($text == 'Click2') {
clicked2 += 1;
if (clicked2 == 1) {
console.log($text);
} else {
return;
}
}
});
Full Demo
To disable both buttons after first click, try:
var clicked = false;
$('.wrap').on('click', 'a', function(){
let $this = $(this);
if( !clicked ){
console.log($this.text());
clicked = true;
};
});
To disable each button after first click, try:
$('.wrap a').each(function() {
let $this = $(this);
$this.disabled = false;
$this.on('click', function() {
if ( !$this.disabled ) {
console.log($this.text());
$this.disabled = true;
};
});
});
Every time someone clicks one of the buttons, your script is setting clicked from false to true, checking if the value is true, then setting it to false again. You need to format it like this if you only want the buttons to fire once (obviously you'd have to duplicate this specifically for each button with different IDs):
var clicked = false;
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if(clicked == false){
console.log($this.text());
clicked = true;
}
});
try this ,much simpler and this will be more useful if you have multiple click buttons
if you had implemented some other way ,this will worth a try
<div class="wrap">
Click1
Click2
</div>
$('.wrap').on('click', 'a', function(){
var $this = $(this);
if($this.attr("data-value") == ""){
console.log($this.text());
$this.attr("data-value","clicked")
}
else{
console.log("Already clicked")
}
});
Fiddle
Instead of putting code on click just on first click disable anchor tag this serve the same thing you wants just find below snippet for more information using this we can reduces round trips to the click functions as well
$('.wrap').on('click', 'a', function(){
$(this).addClass("disableClick");
});
.disableClick{
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
Click1
Click2
</div>
I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
I think you can disable anchor link after one click like this
<div class="wrap">
Click1
Click2
</div>
$(function () {
$('#click1').on("click", function (e) {
$('#click1').on("click", function (e){
e.preventDefault();
e.preventDefault();
});
});
I think its help you.
Just use $(".wrap").one('click', ....
Read the jquery API documentation.

jQuery - $(this) on iPad

I ran through the following Javascript to create a click function to toggle an active state and expand an element to show the full text.
$ = jQuery.noConflict();
$( document ).ready( function() {
$(".toggle_container").hide();
var toggle = function(el, direction) {
if (direction === 'open') {
var content = $(el).toggleClass("active").prev();
var curHeight = content.height();
content.css('height', 'auto');
var autoHeight = content.height();
content.height(curHeight).animate({height: autoHeight}, 100).promise().then(setTimeout(function(){content.removeClass("limited")}, 650));
} else {
var content = $(el).toggleClass("active").prev();
content.height(curHeight).animate({height: '70px'}, 100).promise().then(function(){content.addClass("limited")});
}
}
jQuery(".togglefeaBtn").on("click", function(){
if ($.trim($(this).text()) === 'Read MORE') {
$(this).text('Close');
toggle(this, 'open');
} else {
$(this).text('Read MORE');
toggle(this, 'close');
}
return false;
});
});
The issue that I've noticed is that when loaded on an iPad $(this), when in the click function, or $(el), when in the toggle function return a blank value, however, $(this).text('...') works perfectly.
Is there an issue with the way I'm using the click function, or do touch devices require a different set up?
Shouldn't it be toggle($(this), 'close'); not this? The context of this hasn't been defined.
You can also change $(el) to just be el.
var $ = jQuery.noConflict();
$( document ).ready( function() {
$(".toggle_container").hide();
var toggle = function(el, direction) {
if (direction === 'open') {
var content = el.toggleClass("active").prev();
var curHeight = content.height();
content.css('height', 'auto');
var autoHeight = content.height();
content.height(curHeight).animate({height: autoHeight}, 100).promise().then(setTimeout(function(){content.removeClass("limited")}, 650));
} else {
var content = el.toggleClass("active").prev();
content.height(curHeight).animate({height: '70px'}, 100).promise().then(function(){content.addClass("limited")});
}
}
jQuery(".togglefeaBtn").on("click", function(){
if ($.trim($(this).text()) === 'Read MORE') {
$(this).text('Close');
toggle($(this), 'open');
} else {
$(this).text('Read MORE');
toggle($(this), 'close');
}
return false;
});
});
After continuing to wrestle with this issue, I opted to take a much simpler route and scrap the Javascript method to animate the reveal and just use CSS Transform with max-height. The code got a lot smaller, and works nearly everywhere.
$ = jQuery.noConflict();
$( document ).ready( function() {
$(".toggle_container").hide();
jQuery(".togglefeaBtn").on("click", function(){
if ($.trim($(this).text()) === 'Read MORE') {
$(this).text('Close');
$(this).toggleClass("active");
$(this).prev().css('max-height', '500px');
$(this).prev().removeClass("limited");
} else {
$(this).text('Read MORE');
$(this).toggleClass("active");
$(this).prev().css('max-height', '70px');
$(this).prev().addClass("limited");
}
return false;
});
});

Show/Hide div with checkboxes using classes multiple times on a page

I am having trouble getting my script to work here. I am trying to target the show me span when the checkboxes are checked and it's not working.
Here is the code and link to fiddle: http://jsfiddle.net/dalond/nonyg6sm/
$('.single').live('change', ':checkbox', function() {
var target = $(this).closest('.single').prev().find('.showMe');
if ($(this).find('input:checked').length == 0) {
target.hide();
} else {
target.show();
}
});
I got it worked : http://jsfiddle.net/nonyg6sm/3/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if (this.checked) {
target.show();
} else {
target.hide();
}
});
You can modify it to feet your need.
UPDATE
http://jsfiddle.net/nonyg6sm/4/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if ($(this).closest('.NoEd').find("input[type=checkbox]:checked").length == 0) {
target.hide();
} else {
target.show();
}
});

How to detect if the click event occurred using jQuery?

I have 2 buttons. I want to detect if the previous button clicked then on 2nd button click it should display some data otherwise if user is directly clicking on the second button, it should display an alert(please click the previous button first). I have tried to do so but not able to detect whether the 1st button is clicked or not :-(
HTML
<input type="button" id="btn1" value="button1"></input>
<input type="button" id="btn2" value="button2"></input>
JavaScript
$('#btn1').click(function(){
alert('Button 1 Clicked');
});
$('#btn2').click(function(event) {
var inputButton = document.getElementsByTagName('input');
var $target = $(event.target);
if( $target.is(inputButton[1]) ) {
alert("Please click the 1st Button first");
} else{
alert('Button 2 Clicked');
}
});
EDIT: I chose not to use a variable, because there's not really much reason to use one. Avoiding unnecessary scope pollution, and whatnot.
HTML
<button id="btn1">First Button</button>
<button id="btn2">Second Button</button
JavaScript
$(document).ready(function() {
$('#btn1').on('click', function() {
alert('Button 1 clicked');
$('#btn2').data('btn1-clicked', true);
});
$('#btn2').on('click', function() {
var el = $(this);
if (el.data('btn1-clicked')) {
alert('Button 2 clicked');
} else {
alert('Please click the 1st button first');
}
})
});
You could use this, creating a variable to store a true/false related to the first button:
var btn_clicked = false;
$('#btn1').click(function () {
btn_clicked = true;
alert('Button 1 Clicked');
});
$('#btn2').click(function (event) {
var inputButton = document.getElementsByTagName('input');
var $target = $(event.target);
if (!btn_clicked) {
alert("Please click the 1st Button first");
} else {
alert('Button 2 Clicked');
}
});
Demo here
Try this one define a global variable to track the click of first button
var buttonclicked=false;
$('#btn1').click(function(){
buttonclicked=true;
alert('Button 1 Clicked');
});
$('#btn2').click(function(event) {
if(!buttonclicked){
alert("please click button1 first")
}else{
var inputButton = document.getElementsByTagName('input');
var $target = $(event.target);
if( $target.is(inputButton[1]) ) {
alert("Please click the 1st Button first");
} else{
alert('Button 2 Clicked');
}
}
});
I think you can put the second button function in the first one.
$('#btn1').click(function(){
alert('Button 1 Clicked');
$('#btn2').click(function(event) {
var inputButton = document.getElementsByTagName('input');
var $target = $(event.target);
alert('Button 2 Clicked');
}
});
});
You then also won't need the check in the second button.
Try to set a flag
var firstButtonClicked;
$('#btn1').click(function(){
firstButtonClicked = true;
alert('Button 1 Clicked');
});
check firstButtonClicked in second button click.

Categories

Resources