http://jsfiddle.net/98ftvycL/
I figured out how to make a toggle button which hides and shows the div with the content, but how can I make the content hidden by default and the toggle button to show the content
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
Use CSS to hide content during page load.
CSS:
#content{
display:none;
}
Jquery:
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
Here is a new jsFiddle.
The trick is to hide the entry when the page loads.
$(function(){
// New code
$("#content").hide();
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
return false;
});
});
See also the jQuery docs on hide().
An alternative way shown in this additional jsFiddle is to set the "display:none;" CSS property on the div in the first place.
<div style="display: none;" id="content">
<p>Hello</p>
</div>
If you also want to hide the button when the content is shown, we can again use the .hide() function to now hide the button. Another jsFiddle is available. The core code for this becomes:
$(function(){
$('a.toggle').click(function(){
$('#content').stop().slideToggle(500);
// Start of new code
$('.toggle').hide();
// End of new code
return false;
});
});
Related
I need some script.
To hide a div by clicking anywhere on the page
To hide a div by clicking on button, images or particular script
To hide a div by clicking anywhere on the page ( when div contain any other script)
I am currently using
<script>
$(document).ready(function () {
$("#div").click(function () {
document.getElementById('div').style.display = 'none';
});
});
</script>
This working fine why div contain images, but it not working when div contain script like advertisement script such as chitika, adsense or any other
Please tell how to do.
Try this use this this selector is used to hide the clicked div
$("#div").click(function () {
$(this).hide();
});
To hide it, you would do some javascript and
Also you need to include Jquery library
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
$("#YourDivID").click(function (){ //inspect the ID might differ.
$(this).hide();
});
This code answers to your first and third question:
$( document.body ).click(function() {
document.getElementById(name of your div).style.display = 'none';
});
And the second question:
<div id="testdiv">test</div>
<script>
function hidediv(){
document.getElementById("testdiv").style.display = 'none';
}
</script>
<input type=button value="Click me" onclick="hidediv()">
I have the following html
<a href="email.html" target="_blank" ><img src="../img/mailto.gif" alt="Send email" id='email'/></a>
Clicking the image should open a new window and you should now if that image has been clicked on before, simply because it would change when you click on it.
This is also included in a table created with PHP from a MySQL table (basically, this means I will get a new image in every row and I can only change their ID's globally, not one by one..)
After adding this jquery code the link stopped working. Which means that, when I click on the image it changes to a different one (.../img/mailto_onclick.gif) and that's fine, but the email.html page doesnt open in a new tab like it used to...
<script language="javascript">
$(document).ready(function() {
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
return false;
});
});
</script>
Any thought's on how to get this working?
Sorry if it's some basic or obvious stuff
Remove return false as it will prevent the default behavior for click() because <img> is wrapped inside <a></a>.
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
// return false; // remove
});
Try this:
<script language="javascript">
$(document).ready(function() {
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
//return false;
});
});
</script>
I'm trying to hide the header div on my page, but I have already tried using the jquery functions slideup and slidetoggle, as well as hide, but my div does not seem to hide. I actually want it to hide after 5 seconds, but to no avail. Would the css affect the jquery functions of my div?
My Div:
<div id="headerrr" class="row firstrow">
<span id="description" >You are currently on preview mode</span>
<span id="close-preview">[close preview]</span>
</div>
My CSS:
.firstrow{
background-color:#4d4d4d;
color:white;
height:50px;
padding:15px;
}
My JS:
$(document).ready(function(){
$("#headerrr").hide().delay(100);
$('#headerrr').slideToggle("slow");
});
I am currently using twitter bootstrap 3, would that affect my jquery as well?
Try:
$(document).ready(function(){
setTimeout(function(){
$("#headerrr").fadeOut();
// OR $("#headerrr").slideUp();
},5000);
});
Just calling .delay() will not affect the next sequence of commands as it it not equivalent to Thread.sleep()
If you want to use a delay then
$(document).ready(function () {
$("#headerrr").hide().delay(1000).queue(function(){
$(this).slideToggle("slow");
}).dequeue();
});
Demo: Fiddle
Try this.... It may be helpful to you....
$(document).ready(function () {
$("#headerrr").hide().delay(1000).queue(function(){
$(this).slideToggle("slow");
}).dequeue();
});
This is the FIDDLE document
I have this markup:
<div class="container" id="logo" style="text-align:center;">
//other loading stuff
Enter Website
</div>
<div id="content">
//main content
</div>
At the top before the closing head tag I have:
<script>
$(function() {
$('#enter').hide();
});
$(window).load(function() {
$('#enter').show();
});
</script>
And at the bottom I have (before the closing body tag):
function EnterSite() {
$("#enter").click(function(){
$("#content").show(2000);
});
}
and CSS:
#logo {
z-index: 99;
}
#content {
display: none;
}
But it just shows the logo div and clicking on the Enter Website link does nothing.
what I want to do is show the logo div till the page is loaded (window.load) with the Enter Website link hidden. Once the page is loaded then show the link which on click will show the content div
The problem is you are using an onclick handler, to bind a new click handler using jQuery. The new click handler won't fire first time you click on the <a> tag, because the event has already happened.
Either remove the onclick from markup and just use
$(function(){
$("#enter").hide().click(function(){
$("#content").show(2000);
});
})
Or change to:
function EnterSite() {
$("#content").show(2000);
}
I suggest using first solution and avoid mixing inline script and jQuery to keep all your script unobtrusive and easier to maintain
Try this:
$(window).load(function () {
$('#enter').show();
});
$(document).ready(function () {
$("#enter").click(function () {
$("#content").show(2000);
});
});
Fiddle here.
on this site, I have 2 uses of jquery, one for "anything slider" and another for a toggle for hide show.
http://www.worklightrpo.com/
If I remove the toggle's link to jquery, the slider works, but the toggle doesn't... this is the link for the toggle's jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
Does anyone know how I can get them BOTH to work and play nicely?
Thanks
The full portion of code is this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Learn More');//change the button label to be 'Show'
}else{
toggle_switch.html('Condense');//change the button label to be 'Hide'
}
});
});
});
</script>
Don’t load two different javascript library versions, only one is ever needed.