I am trying to add a slide effect to my toggle script
<script>
function clickitems() {
// action 1
if( document.getElementById('spoiler2').style.display=='none' ){
document.getElementById('spoiler2').style.display='block';
}
else{
document.getElementById('spoiler2').style.display='none';
};
// action 2
if( document.getElementById('spoiler').style.display=='block' ){
document.getElementById('spoiler') .style.display='none';
}
}
</script>
But so far without success, can anyone help me out ? Much appreciated
The elements spoiler and spoiler2 are simple div elements
<div id="spoiler" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
<div id="spoiler2" style="width:300px;height:100%;display:none;"> Txt and image Content</div>
The buttons are <a class="button" onclick="clickitems()">Items</a>
And yes i could have gone with a paragraph tag instead of a link
Ok, so far i got this,
A JavaScript to close the other and Jquery open element while toggling the selected element
<script>
function clickitem() {
if( document.getElementById('spoiler').style.display=='block' ){
document.getElementById('spoiler') .style.display='none';
}
}
</script> </p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#spoiler2").slideToggle("slow");
});
});
</script>
Related
I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>
I'm trying to learn jQuery... everything is going slow & steady. Not complaining. However I like to challenge myself to do something different whenever that tutorial I'm doing is showing me something.
So this is what I have:
A HTML page with some DIVs.
I want to dynamically add a SHOW/HIDE button at the end of each DIV.
If I click that button that DIV above that show/hide button should disappear.
The HIDE button should become SHOW. If I click it again it should show the DIV again.
I know how to add a show/hide button at the end of each div.
I don't know how to tell each button that the DIV above him should be hidden.
The divs do not have an unique ID so I'm thinking that I should also add an unique ID to each DIV. I want to do this with jQuery.
So I'm thinking that I should do some kind of foreach loop. I should go trough each DIV, add an unique ID, add the unique show/hide button that would tell the exact DIV number to hide/show.
Did I got the logic right? Can anyone show me the exact syntax? I'm not only looking for the right code but also see if I have the right logic.
Thank You
$('button').click(function() {
$(this).parent().prev().toggle();
if ($(this).text() == 'Show') {
$(this).text('Hide');
} else {
$(this).text('Show');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a
<button>Hide</button>
</div>
<div>b
<button>Hide</button>
</div>
<div>c
<button>Hide</button>
</div>
<div>d
<button>Hide</button>
</div>
Or did you mean like this:
$('button').click(function() {
$(this).prev().toggle();
if ($(this).text() == 'Show') {
$(this).text('Hide');
} else {
$(this).text('Show');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>a</span>
<button>Hide</button>
</div>
<div><span>b</span>
<button>Hide</button>
</div>
<div><span>c</span>
<button>Hide</button>
</div>
<div><span>d</span>
<button>Hide</button>
</div>
or like this:
$('button').click(function() {
$(this).prev().toggle();
if ($(this).text() == 'Show') {
$(this).text('Hide');
} else {
$(this).text('Show');
}
});
div {display: inline}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>a</div>
<button>Hide</button><br/>
<div>b</div>
<button>Hide</button><br/>
<div>c</div>
<button>Hide</button><br/>
<div>d</div>
<button>Hide</button><br/>
I need your help, I am working on a website where I want a div to delay for 2 seconds then fade in when another div is clicked, but when I want to click it again (to close it) I want it to fade out instantly. Any help?
If you can use Jquery, the following code will help you do it as i got what you want:
this is default css:
.invisElem{display:none}
and the jquery code:
$('body').on('click', '.boxbutton1', function(){
var counter = $(this).data('count');
if(counter == undefined){
counter = 0;
setTimeout(function() {
$('.gymtext').fadeIn(500)//fadeIn after 2 seconds(2000 ms)
}, 2000);
}
else if(counter == 0){
$('.gymtext').fadeOut(function(){
$('.gymtext').remove()
});//fadeout quickly then remove
}
})
i tried to write it down novice friendly if you needed help add comment
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div").fadeToggle(240);
});
});
</script>
<button>Click to fade DIV</button>
<div id="div" style="width:100px;height:100px;background-color:blue;"></div>
Html:
<div>Show div1 and hide div2</div>
<div id="div1">Div1</div>
<div id="div2">Div2</div>
Css:
#div2 {display:none;}
Jquery:
$('#btn').click(function(e){
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow');
});
});
How do I add an onClick listener to a div.
I want to change the name of a div to divclass active if it was inactive previously & then remove the word 'active' if user click on the list again.
I'm at a loss how to do this.
This is what I've tried so far
<script>
$function tog(){
$(this).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
where the div whose class name I want to change is defined as below
<div id="dd" onclick="tog()" class="wrapper-dropdown-4">
<!--something-->
</div>
I've tried this..
<html>
<head>
<script>
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
</script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="dd" class="wrapper-dropdown-4">
ddddd
</div>
</body>
</html>
What's wrong with this now?
I'm inspecting the element id via chrome developer's tool & I don't see any change using this code. So, can anyone please help?
Thanks. :)
The only script you need is
$(function(){
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
});
Demo: Fiddle
you have to pass the object $(this) is not recognizable , use tog(this)
<script>
function tog(obj)
{
$(obj).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
<div id="dd" onclick="tog(this)" class="wrapper-dropdown-4">
<!--something-->
</div>
not the best way to do it, you can bind the event ,by registering the click in the event.
Umm guys i got stuck in Jquery when i was fiddling along with some animation The thing was i wanted to make a textbox appear and show the text when a button is highlighted like a gallery ummm ..... . Anyway i made halfthrough but the text is not displaying . so any help...
P.s the idea was to have a button/circle glow and a text to appear below it
like when one button/circle glows an empty space below shows the text associated with it.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function slide()
{//slide start
$(".textHold").hide()
.delay(1000)
.queue(
function()
{//queue function start
$(".red").css(
{//css start
"background-color":"#000"
}//css end
);//css ();
$(this).dequeue();
}//queue function/\
);//queue();
$(".textHold").fadeIn(500);
$(".textr").fadeIn(500).fadeOut(5000).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold")
.queue(
function ()
{
$(".red").css({"background-color":"#f00"});
$(this).dequeue();
}
)
.delay(500)
.queue(
function()
{
$(".blue").css({"background- color":"#000"});
$(this).dequeue();
}
)
.fadeIn(500);$(".text").fadeIn(500).delay(500).fadeOut(500).delay(500);
$(".textHold").fadeOut(500).delay(500);
$(".textHold").queue(
function()
{
$(".blue").css({"background-color":"#00f"});
$(this).dequeue();
}
);
}//slide() /\
setInterval(function(){slide();},500);
</script>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
<div class="textHold">
<span class="text">Hello blue</span>
<span class="textr">Hello Red</span>
</div>
</body>
It seems to me that the code to change the style for the button is under your control (not a third party code). In this case, you can trigger a JQuery custom event when button changes color. There would be a listener to this event which will according make the text appear.
See: http://www.sitepoint.com/jquery-custom-events/