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
Related
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 have a container holding four divs. After I click on one div, the remaining three neeed to be appended to another div. How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer darth">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer luke">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer won">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer maul">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
<h2>Enemies</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
JQuery
$(document).ready(function(){
var yourCharacter;
var enemy1;
var enemy2;
var enemy3;
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
yourCharacter = $(this);
$('#your').append(yourCharacter);
enemy1 = $('.vader');
$('#enemies').append(enemy1);
})
});
I need to append the remaind charContainers that were not clicked to the enemies container div
This works for me. You may want to add a check for equality, since the chosen div will be initially appended to enemies, then moved:
$('.charContainer').on('click', function(){
$('.charContainer').each(function() {
$('#enemies').append($(this));
})
yourCharacter = $(this);
$('#your').append(yourCharacter);
})
Since "your character" has already been moved by the time the rest of the characters need to be moved, the selector '.characters>.charContainer' (all the "charContainer" children of "characters") will not select your character (since it's already moved) - just the remaining characters
$('.charContainer').on('click', function() {
$('#your').append($(this));
$('.characters>.charContainer').each(function() {
$('#enemies').append($(this));
});
})
Alternate version using arrow function:
$('.charContainer').on('click', function() {
$('#your').append($(this));
$('.characters>.charContainer').each( (undefined, char) => { $('#enemies').append($(char)) } );
})
Or borrowing Tekebo's use of appendTo:
$('.charContainer').on('click', function() {
$(this).appendTo('#your');
$('.characters>.charContainer').appendTo('#enemies');
})
Note: the main advantage of using the children selector as opposed to the siblings of the clicked div or all divs of the 'charContainer' class is that it doesn't matter which order it's done in - the result will be the same. (However, moving the clicked div last will cause more work to be done)
You could simply use siblings(), like this:
$(document).ready(function(){
$(".charContainer").on("click",function(){
$(this).siblings().appendTo("#enemies");
$(this).appendTo("#your");
});
});
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
The following is what my HTML document looks like:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/homepage-script.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
And here is my script:
$('#steps > p').on('click' , function(){
$('steps > p').css('background', 'yellow');
});
Why is my script not running on my website?
You need to wrap the jQuery in a document ready and you can use $(this) since it is targetted in the onclick event:
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).css('background', 'yellow');
});
})
however what I would recommend is having a highlight class that is then toggled in the onclick event;
//CSS
.highlight{background:yellow}
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).toggleClass('highlight');
});
})
Tht way you are adding / removing a class instead of altering the elements CSS.
If you want to add the highlight class to all the p's in that div as per #Phil comment -
$(document).ready(function(){
$('#steps > p').on('click',function(){
$('#steps > p').toggleClass('highlight');
});
})
$(document).ready(function(){
$('#steps > p').on('click',function(){
$(this).toggleClass('highlight');
});
})
.highlight{background:yellow}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/homepage-script.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
</body>
</html>
You are missing the # selector in your nested line of code:
$('#steps > p').css('background', 'yellow');
This will make all of the p elements turn to a yellow background. If you only want the element the user clicked, then reference the "selected" object with $(this):
$('#steps > p').on('click' , function(){
$(this).css('background', 'yellow');
});
The script should be after the div.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="how-it-works">
<p>How It Works</p>
<img src="some-imageurl">
<div id="steps">
<p>Step 1</p>
<p>Step 2</p>
<p>Step 3</p>
</div>
<!--The script should be after the div.-->
<script src="scripts/homepage-script.js"></script>
I have used this method to make a slider popping up when clicking on a button:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
I have made my own button for it + some other changes. However — i have struggled for 2 days now, trying to figure out how to be able to move my button out of the div it was in the original script.
Because; when i move it out of the original div, tat looks like this:
<div id="slidebottom" class="slide">
It simply stops working.
At first i thought it had something to do with the fact that the ID that started the slider animation, was defined as '(this')
So i ran a 'test' to figure out the ID that 'this' was and replaced it with that.
But still; nothing happens when i move it into another div.
I can move it out of all divs just below the 'body' tag — and there it will work as well.
Here is the html-part
<div id="slidebottom" class="slide">
<img src="xxx.jpg">
</div>
And here is the javascript:
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#hotels').next().slideToggle();
});
});
</script>
I am a rookie when it comes to javascript, so please forgive me if this is dumb question.
Just to sum up; i just want to be able to move my button somewhere else than this one particular div.
I hope I get it in total, so...
Your slider is based on next(), which means: starting at $("#hotels"), the function is binding the sliding functionality to the element directly after $("#hotels") - literally the next element, and ONLY the next element.
If the element you want to toggle is moved to another position in your HTML, the function will stop working, because it strictly refers to a position in the HTML, not to a designated element (like it would be done by a query selector).
Maybe you could post your whole HTML?
And thank you for answering.
Here is the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--*********** Aktivere CSS3 selectors i IE 7 & 8 ***********
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<![endif]-->
<title></title>
<!--*********** CSS ***********-->
<link href="../../css/dev_brokop_em.css" rel="stylesheet" type="text/css"/>
<!--
<link href="../../css/mediumstyles.css" media="only screen and (min-width: 768px)" rel="stylesheet" type="text/css"/>
<link href="../../css/smallstyles.css" media="only screen and (min-width: 610px)" rel="stylesheet" type="text/css"/>
-->
<link href="../../css/jquery.fullPage.css" rel="stylesheet" type="text/css"/>
<!--*********** JS ***********-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.fullPage.js"></script>
<!--*********** Aktivere Media Queries i IE 7 & 8 ***********-->
<script src="../../js/respond.min.js"></script>
</head>
<body id="em">
<div id="fullpage">
<div class="section" id="bg">
<!--************ Bottom Logos ************-->
<div id="circlesbottom">
<img src="../../img/experience_meetings/em_circles.png" border="0">
</div>
<div id="logobottom">
<img src="../../img/experience_meetings/em_logo.jpg" border="0" width="100" height="100">
</div>
<img id="pic" class="portrait" src="../../img/experience_meetings/hotels_off.png" border="0" width="100" height="100">
<div id="content">
<div id="movie_button">
<img src="../../img/experience_meetings/em_button_movie.png" width="90" height="90" border="0">
</div>
<div id="content_inside">
<h1>EXPERIENCE MEETINGS</h1><br>
<h2>Daectisquia volum velent audam dit qui adipiet pra posaepe liaspidebite veliqui vendit plia nus con nectur?Aqui berum que ommolenis quiasperum eturepe sunt alit exped quassunt prestem quam aut reiunt quae volupitatet omnient ma exerisq uundam fuga. Nem. Itatecatur, officiu reicietur?</h2>
</div>
</div>
<!--************* Slidebottom ************-->
<div id="slidebottom" class="slide">
<div id="inner">
<div id="bottomslider_wrapper">
<div id="bottomslider_content_01">
<h1>DANMARK</h1>
</div>
<div id="bottomslider_content_01">
<h1>SVERIGE</h1>
</div>
<div id="bottomslider_content_01">
<h1>NORGE</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--************** Turn Hotel button on and off ************-->
<script type="text/javascript">
var newsrc = "hotels_on.jpg";
function changeImage() {
if ( newsrc == "hotels_on.jpg" ) {
document.images["pic"].src = "../../img/experience_meetings/hotels_on.png";
document.images["pic"].alt = "hotels_on";
newsrc = "hotels_off.jpg";
}
else {
document.images["pic"].src = "../../img/experience_meetings/hotels_off.png";
document.images["pic"].alt = "hotels_off";
newsrc = "hotels_on.jpg";
}
}
</script>
<!--************* Bottom slider ****************** -->
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#hotels').next().slideToggle();
});
});
</script>
<!--*********** fullpage.js ***********-->
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
</body>
</html>
I managed to work it out with the help of your logic. Here is the code i ended up with.
Thank you all for great help! :)
<div id="slidebottom" class="slide">
<div id="inner">
<div id="bottomslider_wrapper">
<div id="bottomslider_content_01">
<h1>DANMARK</h1>
</div>
<div id="bottomslider_content_01">
<h1>SVERIGE</h1>
</div>
<div id="bottomslider_content_01">
<h1>NORGE</h1>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
document.getElementById("hotelmenu")
$('#hotels').click(function() {
/*alert(this.id);*/
$('#inner').slideToggle();
});
});
</script>
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;
});