How to apply the .toggle() only the clicked DIV.
My current code applies to all toggle div.
The code switch between the content from <div class="toggled">
I need to do it in version 1.4
Anyone can help me?
This my code:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle').click("click", function() {
$('.toggled').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
<div class="toggled">
<h3>FRONT 1</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 1</h3>
</div>
Switch Text Toggle<br/>
</div>
<div class="card">
<div class="toggled">
<h3>FRONT 2</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 2</h3>
</div>
Switch Text Toggle<br/>
</div>
</body>
</html>
Thanks in advance!
You'll need to change the ID of the anchors to a class, as ID's are unique.
Then you'd do:
$(function() {
$('.toggle').on("click", function() {
$(this).siblings('.toggled').toggle();
return false;
});
});
Where you find the siblings of the clicked anchor with the class .toggled, and toggle those. You also need a document.ready function, and the event handler has some typos.
And use a newer version of jQuery, 1.4 is outdated.
FIDDLE
Replace $('.toggled').toggle(); with $(this).toggle();. You're currently requesting all .toggle containers be toggled, not the one that is the focus of the event.
Try this:
$('.card #toggle').click(function() {
$('.toggled').toggle();
return false;
});
Related
I have this code, and I want to hide a div clicking on a tag
I was using some jQuery scripts to do that, but I don't know why, the scripts aren't loading.
Code:
<body>
<div class="myprojects">
my projects
</div>
<br>
<div class="links">
domain.gq
<br>
domain.art
</div>
<div class="contactme">
contact me
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('#links').hide();
</script>
<script>
$(document).ready(function(){
$("#myprojects").click(function(){
$("#links").fadeToggle();
});
});
</script>
</body>
I want people to click on "my projects" and then, the links div to show up, but scripts aren't loading.
You have selector issues in several places. e.g:
You used the id selector
$('#links').hide();
You should use the class selector:
$('.links').hide();
Same issue with #myprojects, it should be .myprojects the class selector.
BTW, why not put the hide logic inside the $(document).ready method?
<div class="links">
domain.gq
<br>
domain.art
</div>
<div class="contactme">
contact me
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
</script>
<script>
$(function() {
$('.links').hide();
$(".myprojects").click(function() {
$(".links").fadeToggle();
});
});
</script>
Want to create a DIV which toggle when I click on youtube subscription button. Also, I want to hide the Youtube button.
This seems easy, but Jquery toggle method is not working on youtube sub button.
CODE ↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
//Your code here
$('#xx2').click(){
$('#cc').toggle();
}
});
</script>
<div id="cc" style="display:none;" >
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" ></div>
</div>
See this photograph :
Please close the script tag and provide some text inside the xx2 div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(e){
$('#cc').toggle();
});
});
</script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" >text</div>
</div>
Syntax error
Change $(document) instead of $("document")
And click function declaration was wrong. initiate the click function of xx2 and the toggle inside the click function
$(document).ready(function(e) {
$('#xx2').click(function() {
$('#cc').toggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe" data-channelid="UCwevqbHI8ppBSvVKESoLpPQ" data-layout="full" data-count="default">xx</div>
</div>
there is error in the syntax of jquery, use following cod:
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(){
$('#cc').toggle();
});
});
</script>
Maybe the classic way will work:
HTML:
<div id="cc">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default">
xxx <!-- The xxx is used for better hitting -->
</div>
</div>
I removed the style attribute from #cc.
Added following CSS:
div.cc {display:none;}
Javascript:
$(document).ready(function(){
$('#xx2').click(function() {
$('#cc').toggleClass("cc");
});
});
So far I understand your problem right, this did work according Jsfiddle.net .
I'm new to JQuery and I would want like to know how to apply the .toggle() method only in clicked DIV instead of the all DIVs of the page.
Can anyone help me?
PS: I need implement in the JQuery version 1.4
This is my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle2').live("click", function() {
$('.toggle2').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 1</p>
<p class="toggle2" style="display:none;">BACK 1</p>
</div>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 2</p>
<p class="toggle2" style="display:none;">BACK 2</p>
</div>
</body>
Thanks in advance!
$(function() {
$('#toggle2').live("click", function() {
$(this).parent().find('.toggle2').toggle();
return false;
});
});
ID's are unique, and this will probably only work on the first occurence of #toggle, so you'll need to use classes there as well.
FIDDLE
I am making a jeopardy game. When I click a div I want to do some effect on it. However, I can't even get a simple .hide to work. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jeopardy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/customStyles.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/flip.js"></script>
</head>
<body>
<div class ="container">
<div class="row">
<div class="prizeAmount">
<div class="span2">
<h3 id="test">100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
<div class="span2">
<h3>100</h3>
</div>
</div>
</div>
</div><!--close container-->
</body>
</html>
javascript
$(function() {
$('#span2').click(function() {
$(this).hide(400);
/*$('#span2').hide(400); <--tried this also */
});
});
I've used jquery to animate navigation on a site before. Am i missing something obvious?
Your
$('#span2') // id selector
Should be
$('.span2') // class selector
Since it's a class
Your problem is that you are using the hash # which is the id selector instead of the class selector which is a dot ..
Try
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
You might want to read up more on the different jQuery Selectors on the official documentation
You dont have any elements with ID "span2", they are all CLASS=span2.
Try this:
$(function() {
$('.span2').click(function() {
$(this).hide(400);
});
});
Note: this will effect ALL elements with the class "span2" if you don't want that behavior, then use ID="span2" for a single element, and use unique names for each.
I'm slowly getting up to speed with jQuery and am starting to want to abstract my code. I'm running into problems trying to define click events at page load.
In the code below, I'm trying to run through each div with the 'block' class and add events to some of its child elements by selecting them by class:
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$('HTML').addClass('JS'); // if JS enabled, hide answers
$(".block").each(function() {
problem = $(this).children('.problem');
button = $(this).children('.showButton');
problem.data('currentState', 'off');
button.click(function() {
if ((problem.data('currentState')) == 'off'){
button.children('.btn').html('Hide');
problem.data('currentState', 'on');
problem.fadeIn('slow');
} else if ((problem.data('currentState')) == 'on'){
button.children('.btn').html('Solve');
problem.data('currentState', 'off');
problem.fadeOut('fast');
}
return false;
});
});
});
</script>
<style media="all" type="text/css">
.JS div.problem{display:none;}
</style>
<div class="block">
<div class="showButton">
Solve
</div>
<div class="problem">
<p>Answer 1</p>
</div>
</div>
<div class="block">
<div class="showButton">
Solve
</div>
<div class="problem">
<p>Answer 2</p>
</div>
</div>
Unfortunately using this, only the last of the divs' button actually works. The event is not 'localised' (if that's the right word for it?) i.e. the event is only applied to the last $(".block") in the each method.
So I have to laboriously add ids for each element and define my click events one by one. Surely there's a better way! Can anyone tell me what I'm doing wrong? And how I can get rid of the need for those IDs (I want this to work on dynamically generated pages where I might not know how many 'blocks' there are...)
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$('HTML').addClass('JS'); // if JS enabled, hide answers
// Preferred version DOESN'T' WORK
// So have to add ids to each element and laboriously set-up each one in turn...
$('#problem1').data('currentState', 'off');
$('#showButton1').click(function() {
if (($('#problem1').data('currentState')) == 'off'){
$('#showButton1 > a').html('Hide');
$('#problem1').data('currentState', 'on');
$('#problem1').fadeIn('slow');
} else if (($('#problem1').data('currentState')) == 'on'){
$('#showButton1 > a').html('Solve');
$('#problem1').data('currentState', 'off');
$('#problem1').fadeOut('fast');
}
return false;
});
$('#problem2').data('currentState', 'off');
$('#showButton2').click(function() {
if (($('#problem2').data('currentState')) == 'off'){
$('#showButton2 > a').html('Hide');
$('#problem2').data('currentState', 'on');
$('#problem2').fadeIn('slow');
} else if (($('#problem2').data('currentState')) == 'on'){
$('#showButton2 > a').html('Solve');
$('#problem2').data('currentState', 'off');
$('#problem2').fadeOut('fast');
}
return false;
});
});
</script>
<style media="all" type="text/css">
.JS div.problem{display:none;}
</style>
<div class="block">
<div class="showButton" id="showButton1">
Solve
</div>
<div class="problem" id="problem1">
<p>Answer 1</p>
</div>
</div>
<div class="block">
<div class="showButton" id="showButton2">
Solve
</div>
<div class="problem" id="problem2">
<p>Answer 2</p>
</div>
</div>
edited because I found the HTML :)
First: you need to declare "button" and "problem" with the var keyword.
Next, the click handler will be called in the context of the target element, so you shouldn't reference "button" inside it but "$(this)" instead.
Next, you're going to need to come up with a way to relate each button to its corresponding "problem" element. The handler can find the companion "problem" using jQuery DOM traversal routines:
button.click(function() {
var $button = $(this), $problem = $button.closest('div.block').find('.problem');
if (($problem.data('currentState')) == 'off'){
$button.children('.btn').html('Hide');
$problem.data('currentState', 'on');
$problem.fadeIn('slow');
} else if (($problem.data('currentState')) == 'on'){
$button.children('.btn').html('Solve');
$problem.data('currentState', 'off');
$problem.fadeOut('fast');
}
return false;
});
Now another alternative would be to use the live mechanism, which would let you create only one handler function. It'd be pretty similar to this, but instead of binding the handler to each "button" <div> you'd just set it up and reference the selector:
$('.button').live('click', function() {
// as above
});
Sorry, not enough reputation to vote for any of the above as useful, which they most definitely were!
The answer was actually quite simple - as #patrick and #Pointy rightly pointed out, all I needed to do was to add the var keyword to declare my two variables. doh!
I couldn't actually get the code suggestions to work but mine works fine now that it's been fixed with your help. Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
$('HTML').addClass('JS'); // if JS enabled, hide answers
$(".block").each(function() {
var problem = $(this).children('.problem');
var button = $(this).children('.showButton');
problem.data('currentState', 'off');
button.click(function() {
if ((problem.data('currentState')) == 'off'){
button.children('.btn').html('Hide');
problem.data('currentState', 'on');
problem.fadeIn('slow');
} else if ((problem.data('currentState')) == 'on'){
button.children('.btn').html('Solve');
problem.data('currentState', 'off');
problem.fadeOut('fast');
}
return false;
});
});
});
</script>
<style media="all" type="text/css">
.JS div.problem{display:none;}
</style>
</head>
<body>
<div class="block">
<div class="showButton">
Solve
</div>
<div class="problem">
<p>Answer 1</p>
</div>
</div>
<div class="block">
<div class="showButton">
Solve
</div>
<div class="problem">
<p>Answer 2</p>
</div>
</div>
<div class="block">
<div class="showButton">
Solve
</div>
<div class="problem">
<p>Answer 3</p>
</div>
</div>
</body>
</html>