I have used following code from http://w3schools.com. But in this I can use only once. I want to use it more than one times because I want to create FAQ panel in HTML
but it is from ID and I can use it only once.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
demo
script:
$(function(){
$('a.toggle').click(function(){
$('.myContent').stop().slideToggle(500);
return false;
});
});
HTML
CLICK
<div>
<div class="myContent" style="background-color: #99CCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery.
</div>
<div class="myContent" style="background-color: #CCCCFF; padding: 5px 10px;">Optimized the javascript so that all code is based on jQuery.
</div>
</div>
change the id to class and then use class selectors in css and jQuery
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
<div class="flip">Click to slide the panel down or up</div>
<div class="panel">Hello world!</div>
CSS
.panel, .flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel {
padding:50px;
display:none;
}
then
$(document).ready(function () {
$(".flip").click(function () {
$(this).next('.panel').slideToggle("slow");
});
});
Demo: Fiddle
Related
If I click on a button,
the color of the first div changes to black from white and the color of the second div changes to white from black, if I click on that button the vice-versa happens.
You can use toggleClass() to acheive this.
Working Demo
$(document).ready(function(){
$("input").click(function(){
$('div').toggleClass('black , white')
});
});
.square{
width:100px;
height:100px;
border:1px solid red;
}
.black{
background-color:black;
}
.white{
background-color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square black"></div>
<div class="square white"></div>
<input type="button" value="Change">
Using jQuery's .toggleClass()
http://api.jquery.com/toggleclass/
$("button").on("click", function(){
$("#a, #b").toggleClass("black");
});
div{width:200px; height:50px; background: #ccc;}
.black{background:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="a"></div>
<div id="b" class="black"></div>
Using bitwise XOR ^ to remember the button state:
https://stackoverflow.com/a/22061240/383904
$("button").on("click", function(){
var io = this.io ^= 1;
$("#a").css({background: io ? "#ccc" : "#000"});
$("#b").css({background: io ? "#000" : "#ccc"});
});
div{width:200px; height:50px; background:#000;}
#b{background:#ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="a"></div>
<div id="b"></div>
Using JS's Array.prototype.reverse()
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
var colors = ["#000","#ccc"];
$("button").on("click", function(){
$("#a").css({background: colors.reverse()[0] });
$("#b").css({background: colors[1] });
});
div{width:200px; height:50px; background:#000;}
#b{background:#ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="a"></div>
<div id="b"></div>
Here's an additional reading if you want to use functions: https://stackoverflow.com/a/21520499/383904
function toggleClass() {
$(".main div").toggleClass("black , white");
}
.main {
background-color: lightblue;
height: 50px;
width: 50px;
}
.black {
color: #000;
}
.white {
color: #fff;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="main">
<div class="black">first</div>
<div class="white">second</div>
</div>
<button onclick="toggleClass();">Toggle</button>
I want that clicking on parent one children div class will toggle.
in html
<div class="A">
<div class="B C">
<p>check your card</p>
</div>
</div>
in css
.A{display:block;}
in js
$(".A").click(function() {
$(".B").toggleClass("C");
});
In you css there is no C class you need to add it.
$(".A").click(function () {
$(".B").toggleClass("C");
});
.A {
display:block;
}
.C {
font-size: 120%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
<div class="B C">
<p>check your card</p>
</div>
</div>
I placed it in a fiddle. Seems that the code is working right (inspect element).
You might need to wrap it between
$(document).ready(function() {
// Your code here
});
Or add a .C class in your css
In your question There is no rule defined for class B and class C.so you didn't felt it.But your code was running properly.
$(".A").click(function() {
$(".B").toggleClass("C");
});
.A{display:block; border:1px solid;}
.B{
background-color: red;
color: white;
}
.C{
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A">
<div class="B C">
<p>check your card</p>
</div>
</div>
Your code was working fine. Just adding the css for class ".C" is reflecting it in the browser. Just add this to your css:
.B {color:000;font-size:12px;}
.C {color:red; font-size:20px;}
Below is the working example...
http://jsfiddle.net/opdzvo3f/2/
I have a different with overflow set to scroll and button that when clicked would scroll back to the top.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<style>
.pages{
position:absolute;
top:30px;
bottom:0px;
left:0px;
right:0px;
border:0;
overflow:scroll;
}
.pages div{
position:relative;
width:100%;
height:300px;
border:solid 1px #CDCDCD;
border-top-style:none;
border-left-style:none;
border-right-style:none;
}
</style>
<script>
$(document).ready(function(e) {
$('#new_pages').click(function(event){
event.preventDefault();
//add new page data
//scroll to top
$('#mag_pages').animate({
scrollTop:0
},900);
});
});
</script>
</head>
<body>
<div class="new_pages" id="new_pages">
<div id="count">10+</div>
<div id="text">New Pages</div>
</div>
<div class="pages" id="mag_pages">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
</div>
</body>
</html>
After some googling I'm still no further foreward. scrollTop:0 is all any post says. Whether animated or not doesn't work on for me. Is there another method to achieve this.
The code works fine on a computer when when I test it on a mobile device the scroll function doesn't work.
Do mobiles have to be targeted differently?
Maybe JQuery scroll or animation functions have some problems in mobile devices.
Try using pure JS, instead JQuery:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<style>
.pages{
position:absolute;
top:30px;
bottom:0px;
left:0px;
right:0px;
border:0;
overflow:scroll;
}
.pages div{
position:relative;
width:100%;
height:300px;
border:solid 1px #CDCDCD;
border-top-style:none;
border-left-style:none;
border-right-style:none;
}
</style>
<script>
function newPagesClicked(){
//add new page data
//scroll to top
scrollToTop
}
function scrollToTop(scrollDuration) {
var scrollStep = -window.scrollY / (scrollDuration / 15),
scrollInterval = setInterval(function(){
if ( window.scrollY != 0 ) {
window.scrollBy( 0, scrollStep );
}
else clearInterval(scrollInterval);
},15);
}
</script>
</head>
<body>
<div class="new_pages" onclick="newPagesClicked()" id="new_pages">
<div id="count">10+</div>
<div id="text">New Pages</div>
</div>
<div class="pages" id="mag_pages">
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
</div>
</body>
</html>
I used code like this in one of my projects and it works, try to modify your code like below:
$(document).ready(function(e) {
$('#new_pages').click(function(event){
event.preventDefault();
//add new page data
//scroll to top
$('html, body').animate({
scrollTop:$('#mag_pages').offset().top
},900);
});
});
I have a javascript which displays images from style and css.
<script type="text/javascript">
$(function () {
$("div[style]").click(function() {
$("#full-wrap-new").css("background-image", $(this).css("background-image"));
});
});
</script>
<div id="colors">
<div style="background-image:url(/images/style/whatcan.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/art/art.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/beauty/beauty.jpg); width:200px; height:150px; float: left; margin:4px"></div>
<div style="background-image:url(/images/careers/career.jpg); width:200px; height:150px; float: left; margin:4px"></div>
</div>
I would like to change the script to use img rather than css how do i change this following line of script.
$("#full-wrap-new").css("background-image", $(this).css("background-image"));
This is what i have so far but i have no idea how to change it to img
<script type="text/javascript">
$(function () {
$("div.ri").click(function() {
$("#full-wrap-new").css("background-image", $(this).css("background-image"));
});
});
</script>
<div id="colors">
<div class="ri"><img src="/images/style/whatcan.jpg"/></div>
<div class="ri"><img src="/images/art/art.jpg"/></div>
<div class="ri"><img src="/images/beauty/beauty.jpg"/></div>
<div class="ri"><img src="/images/careers/career.jpg"/></div>
</div>
<div id="full-wrap-new"></div>
I think you trying to do this:
$(function () {
$("div.ri").click(function() {
$("#full-wrap-new").html($(this).find("img").clone());
});
});
Try it in this fiddle (change the sources so you can see something)
I have a script that toggles the visibility of a div, inside of the div is content loaded with the masonry plugin. The issue I'm having is that the masonry div (and as a result the two wrapper divs) doesn't expand in height as the masonry content is loaded - it squishes the masonry items together.
here's my code:
<html>
<head>
<title>view?</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<style type="text/css">
#step_wrapper{
width:960px;
margin:0px auto;
/*float:left;*/
}
.step_num{
float:left;
width:50px;
background-color:#0099ff;
}
.step{
float:left;
width:910px;
background-color:#ff0000;
padding-bottom:20px;
margin-bottom:20px;
}
.step h2{
padding:0px;
margin:0px;
}
.media{
background-color:#59A20E;
width:100%;
text-align:center;
cursor:hand;
float:left;
}
#content-step-1{
}
.content{
float:left;
min-width:785px;
margin-left:40px;
background-color:#0066ff;
padding-left:15px;
display:none;
}
.item {
width: 165px;
float: left;
padding:5px;
background-color:#FF0;
margin-top:10px;
}
</style>
<script>
$(function(){
<!-- masonry plugin -->
var $container = $('#content-step-1');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 165
});
});
$($container).masonry({
// options
itemSelector : '.item',
columnWidth : 165,
gutterWidth : 35
});
<!-- masonry plugin -->
<!-- needs to be auto generated -->
$("#step-1").click(function () {
$("#content-step-1").toggle("fast");
});
<!-- needs to be auto generated -->
});
</script>
</head>
<body>
<div id="step_wrapper">
<div class="step_num">1)</div>
<div class="step">
<h2>STEP ONE SON</h2>
<p>Description here bro</p>
<div id="step-1" class="media">expand</div>
<div id="content-step-1" class="content">
<div class="item">asjdlajskdla</div>
<div class="item"><img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" width='165' /></div>
<div class="item">baksdkjasdasdsdadasdasda</div>
<div class="item">asjdlajskdla</div>
<div class="item">baksdkjjsdksd</div>
<div class="item">baksdkjasdasdsdadasdasda</div>
<div class="item">asjdlajskdla</div>
<div class="item">baksdkjjsdksd</div>
</div>
</div>
</div>
</body>
</html>
any help would be greatly appreciated, thank you!
I had faced smiler problem few day ago. what you need to do here, when you click to open hidden div than you have to reload masonry view. By using below.
$("#step-1").click(function () {
$("#content-step-1").toggle("fast");
$container.masonry('reload');
});