I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/
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 have managed to create a button that shows my div. but I want to have the button disappear as that happens.
At the moment my button only disappears the second time I click it. Any help appreciated.
$(document).ready(function() {
$('.click').click(function() {
$('#contact-form').toggle('slide', 500)
$('.click').toggle();
});
});
.click {
display: block;
}
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>
The reason why it is not working is, you are mixing the display between CSS and JavaScript. jQuery uses the current inline style to check if the button is hidden to display it, when you use .toggle(). Since it doesn't have anything at first, it adds a display: block (or whatever the initial value is) and then when you do the second time, it correctly identifies and removes.
The best thing to do is to use classes. I would suggest something like this parent class.
$(document).ready(function() {
$('.click').click(function() {
$("body").toggleClass("contact-form-open");
});
});
.contact-form-open .click,
#contact-form {
display: none;
}
.contact-form-open #contact-form {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
This way, you control everything using CSS and you don't mess up with the event listeners or add the yucky inline CSS.
I've tried what you've tried and it seems to be working. Maybe it's because you don't close the div tag ?
$(function() {
$('.click').click(function() {
$('.myDiv').toggle();
$('.click').toggle();
})
});
http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview
but I want to have the button disappear as that happens.
So just use hide() instead of toggle :
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
Hope this helps.
$(document).ready(function() {
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
});
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>
More easy:
$(document).ready(function() {
$('.click').click(function() {
$("#contact-form").show();
$(this).remove();
});
});
#contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
I am new to jQuery and Javascript and therefore im testing it. I want to create a div container which is draggable and hideable/visible by clicking on a button.
Could someone please tell why my buttons are not working? Could you also tell me how I can set the div container to invisible as standard so that I have to klick on the show button the see it?
CSS
#draggable { width: 150px; height: 150px; padding: 0.5em; }
HTML
<button id="hide">Hide</button>
<button id="show">Show</button>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
JS
$(function() {
$( "#draggable" ).draggable();
});
$(document).ready(function(){
$("#hide").click(function(){
$("draggable").hide();
});
$("#show").click(function(){
$("draggable").show();
});
});
Here you can see my current code running:
http://jsfiddle.net/tdsdu1uq/2/
Thank you in advance.
you simply have made a mistake in the jQuery selectors.
You should have written the following :
$("#hide").click(function(){
$("#draggable").hide();
});
$("#show").click(function(){
$("#draggable").show();
});
Note the '#' for the id. Your update JSFiddle is here.
Cheers
Change $("draggable").hide();
to
$("#draggable").hide();
and $("draggable").show();
to
$("#draggable").show();
See Demo Here
So I created the following jquery that shows/hides a div.
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").hide();
});
$("#show").click(function(){
$("#me").show();
});
});
This is some text
Hide
Show
http://jsfiddle.net/6DTeq/7/
It works fine. But I need to make it work so that instead of having a separate show and hide text, I need to toggle show and hide.
But main problem is I dont want to have the text in the javascript file for internationalization purposes.
It's ok if the text resides in the html. Can someone help me with this?
Html :
<div id="me"> This is some text</div>
<div id="toggle">toggle</div>
Js:
$("#toggle").click(function(){
$("#me").toggle();
});
Demo -----> http://jsfiddle.net/6DTeq/8/
Updated fiddle -----> http://jsfiddle.net/6DTeq/13/
Try this
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").toggle();
$(this).text(function(i, val) {
return val === 'Show' ? 'Hide' : 'Show';
});
});
});
Check Fiddle
<div id="me" style="display:none;"> This is some text</div>
<div id="clickContainer">
<div id="hide" style="display:none;">Hide</div>
<div id="show">Show</div>
</div>
$(document).ready(function(){
$("#clickContainer").click(function(){
$("#me").toggle();
$("#hide").toggle();
$("#show").toggle();
});
})
Try that:
http://jsfiddle.net/6DTeq/10/
$(document).ready(function () {
$("#toggle").click(function () {
$("#me").toggle();
$(this).text(function(){return $('#me:visible').length?'Hide':'Show'});
}).triggerHandler('click');
});
<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Blah</div>
</div>
<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Another</div>
</div>
When button gets clicked, I want .example to .show, but only the .example that's in the current .test.
Another way that works for your particular HTML:
$('button').click(function(){
$(this).next('.example').show();
});
This will do exactly what you said:
$('button').click(function(){
$(this).closest('.test').find('.example').show();
});
This works too for the markup you posted, but it won't work if the button and .example are not siblings:
$('button').click(function(){
$(this).siblings('.example').show();
});
Hiya Working demo for your case here: http://jsfiddle.net/4bLZF/
this uses slideToggle http://api.jquery.com/slideToggle/
code
$(document).ready(function () {
// Watch for clicks on the "slide" link.
$('button').click(function () {
$(this).next(".example").slideToggle(400);
return false;
});
});