I've tried adding multiple buttons, when i click on one button, the rest get clicked too.
How can i have each button toggles individually?
Also, how can i have them all hidden by default on page load?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<style>
p {
width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Toggle 1</button>
<p>
Text 1
</p>
<button>Toggle 2</button>
<p>
Text 2
</p>
<script>
$( "button" ).click(function() {
$( "p" ).slideToggle( "slow" );
});
</script>
</body>
</html>
EDIT:
Thanks everyone, every code worked!
There's only one last thing, how can i have multiple buttons with its unique paragraph within a main button?
example:
[MainButton.A] <--(Shows additional buttons when clicked)
[ButtonA.1] <--(Shows it's own paragraph when clicked, same as the rest)
[ButtonA.2]
[MainButton.B]
[ButtonB.1]
[ButtonB.2]
The problem is not that all of the buttons are being clicked; it's that all of the paragraph elements are being manipulated every time a button is clicked.
#ArunPJohny's comment has the solution:
$("button").click(function() {
$(this).next("p").slideToggle( "slow" );
});
What this does is select the next <p> element rather than all of them. Note the .next() selector here.
Try like this...
<script>
$(document).ready(function(){
$("p").hide();//hides all <p> initially shows only button clicked..
$( "button" ).click(function() {
$(this).next( "p" ).slideToggle( "slow" );
});
});
</script>
Fiddle https://jsfiddle.net/ohes689y/
Here is your Answer
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideToggle demo</title>
<style>
p {
width: 400px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button class="btncls">Toggle 1</button>
<p>
Text 1
</p>
<button class="btncls">Toggle 2</button>
<p>
Text 2
</p>
<script>
$(".btncls").click(function() {
$(this).next().slideToggle( "slow" );
});
</script>
</body>
</html>
Related
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
I am new to JavaScript and need some help/idea.
I have an HTML anchor tag and I would like to change/append its attributes based on the selection of checkboxes.
Anchor tag without any checkboxes selected:
<a href="javascript:void(0)" data-cb-type="checkout" data-cb-plan-id=“SamplePlan” >Enrol</a>
anchor tag with one checkbox selected:
<a href="javascript:void(0)" data-cb-type="checkout" data-cb-plan-id="SamplePlan" data-cb-addons_id_0=“CheckBox1”>Enrol</a>
likewise, if the user selects further checkboxes attributes to get appended into the anchor tag.
Where I am now:
Currently, I am able to change anchor tag class with the following JQuery code. But unable to change/append attributes.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.red {color: red;}
</style>
</head>
<body>
<input type="checkbox" id="test" value="supress">
<label for="dna_headline_optin_supress">Check me out</label>
<div>
<p class="changeme">Look at me change color</p>
<p>Look at me change color - NOT</p>
<p class="changeme">Look at me change color</p>
</div>
<script type="text/javascript">
$('#test').change(function(){
if($(this).is(":checked")) {
$('.changeme').addClass('red');
} else {
$('.changeme').removeClass('red');
}
});
</script>
</body>
</html>
attr() and removeAttr() are the methods used to add and remove attributes.
https://api.jquery.com/removeAttr/#removeAttr-attributeName
https://api.jquery.com/attr/#attr2
So you should edit your code to:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.red {color: red;}
</style>
</head>
<body>
<input type="checkbox" id="test" value="supress">
<label for="dna_headline_optin_supress">Check me out</label>
<div>
<p class="changeme">Look at me change color</p>
<p>Look at me change color - NOT</p>
<p class="changeme">Look at me change color</p>
</div>
<script type="text/javascript">
$('#test').change(function(){
if($(this).is(":checked")) {
$('.changeme')
.addClass('red')
.attr('rel', '2345');
} else {
$('.changeme')
.removeClass('red')
.removeAttr('rel');
}
});
</script>
</body>
</html>
Try this:
$('.changeme').attr('data-cb-addons_id_0', 'CheckBox1');
To remove attribute:
$('.changeme').removeAttr('data-cb-addons_id_0');
To do it along with your existing code:
if($(this).is(":checked")) {
$('.changeme').addClass('red').attr('data-cb-addons_id_0', 'CheckBox1');
} else {
$('.changeme').removeClass('red').removeAttr('data-cb-addons_id_0');
}
Source: http://api.jquery.com/attr/ and https://api.jquery.com/removeAttr/
Edited after Pete's comment.
$( document ).ready(function() {
$(".exmore").before("<span class='rmtrail'>...</span>");
$(document).on("click",".exmore", function(e){
console.log("clicked");
console.log($(this).siblings("rmtrail").html());
$(this).siblings("rmtrail").toggle();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='exmore'>open</a>
</body>
</html>
I am trying to toggle the inserted .rmtrail element when the .exmore element is clicked but the $(this).siblings(); method is not working. console.log() returns undefined.
Is there a way to force the jQuery DOM to update after an element is inserted? I have been looking online and can not find it.
rmtrail is a class so try .rmtrail
$( document ).ready(function() {
$(".exmore").before("<span class='rmtrail'>...</span>");
$(document).on("click",".exmore", function(e){
console.log("clicked");
console.log($(this).siblings(".rmtrail").html());
$(this).siblings(".rmtrail").toggle();
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<a href='#' class='exmore'>open</a>
</body>
</html>
I want to trigger click on an icon(image) with specific class/id using onclick (or using any other way) of another button. Please see image for reference. Clicking "1" should trigger "2". Currently I am calling a javascript function "launchTopWM" which use following code to trigger click:
$(".custom_toggle_menu_default").trigger("click");
But i am wondering if i can call this code or perform this fucntionality using its click etc, something like href='javascript:$(".custom_toggle_menu_default").trigger("click");'
Following is the Code:
HTML 1:
<img class="custom_toggle_menu_default" src="cc/tt/uu/images/launchTopWM.png">
HTML 2:
<a id="tsp" class="sp" href="launchTopWM()">CNw</a>
Give an id to the element and show the second anchor through pure javascript.
<!DOCTPE html>
<html>
<head>
<title> Button style </title>
<style>
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="getElementById('button').click()" > click me </a>
<button id="button"> Buton </button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#button').click(function(){
alert('Buttons has been clicked');
});
</script>
</body>
</html>
Trigger example, Hope it will give you the idea
<html lang="en">
<head>
<meta charset="utf-8">
<title>Triggger</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="tiggerCall">Trigger Focus</button>
<input type="text" placeholder="Onclick Call Focus" value=''>
<script>
$( "#tiggerCall" ).click(function() {
$( "input" ).trigger( "focus" );
});
$( "input" ).focus(function() {
$( "<span>Text box clicked</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
</body>
</html>
I'm new at Jquery and Javascript. I was trying to modify this example at: w3schools to change to url from the initial: www.w3schools.com to the second one at: www.w3schools.com/jquery and back again to the initial one when click on the button (as many times as desired), but I can not figure out how to do it. Please, include all the code in the answer, it will be easier. Thanks.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
});
});
</script>
</head>
<body>
<p>
<a href="https://www.w3schools.com" id="w3s">
W3Schools.com
</a>
</p>
<button>
Change href Value
</button>
<p>
Mouse over the link (or click on it) to see that the value of the href attribute has changed.
</p>
</body>
</html>
First Hover the Link You Will See... www.w3school.com .... after click on button link change ... you can check it with hover the Link. Work Link as a toggle
https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>W3Schools.com</p>
<button>Change URL</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
<script>
$(document).ready(function(){
$("button").click(function(){
var myURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === myURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", myURL);
});
});
</script>
</head>
<body>
</body>
</html>
You can just use a basic if-else and check the href attribute.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var w3schoolURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === w3schoolURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", w3schoolURL);
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var w3 = "https://www.w3schools.com";
var w3Jquery = "https://www.w3schools.com/jquery";
var toggleFlag = true;
$("button").click(function(){
if(toggleFlag){
$("#w3s").attr("href", w3Jquery);
}
else{
$("#w3s").attr("href", w3);
}
toggleFlag = !toggleFlag;
});
});
</script>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>