i am trying to make a div toggle another div which appears underneath it.
I have managed to do this with a button, however i was wondering if you could do this with another div, so that when you clicked anywhere inside the div, it would make the other div appear and disappear etc...
Here are the two divs i have
//This div is the one you click on
<div id="more_toggle"></div><!---end more_toggle--->
//This div is the one that appears and disappears through the toggle
<div id="more_info">hello</div><!---end more_info--->
This is the script i use to toggle the divs through buttons, but it doesn't work with another div
$(function(){
$("#server_status_button").click(function(event){
event.preventDefault();
$("#status1").slideToggle();
});
});
Thanks for any help
$("#more_toggle").click(function(event) {
$("#more_info").slideToggle();
});
jsFiddle example
Have you tried:
$(function() {
$('#more_toggle').click(function(e) {
$('#more_info').slideToggle();
});
});
If you want to hide use display toggling just try .toggle() instead of .slideToggle().
$('#more_toggle').click(function(){
$('#more_info').slideToggle();
});
Related
So I have looked at a bunch of examples and still cannot seem to figure this one out. I have an element that I am hiding "display:none" until it is expanded by a link using jQuery slideToggle. Working but I need the focus to go to the new element div. I've tried a bunch of examples and nothing seems to be working so I'll post it here.
Here is the fiddle:
JS FIDDLE
So on click of this link here:
<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>
I am trying to do two things, well three but two would be marvelous.
1. Scroll to this DIV which is just a bit further down the page.
2. Focus on the text that is now showing.
Apparently because the node is hidden, then it will not focus to it or something to that affect and it has nothing to scrollTo or when I have tried it just scrolls all the way to the top. But I have a fixed header so that does not work because then it is just hidden. So what I have now is basically working and scrolling to the div and from what I can tell... focusing on it. But I need to set it a ways from the top and when I try it breaks the scrolling. Any one see what I am doing wrong?
$(function() {
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
$("#whyDiv").slideToggle("slow");
});
});
Any help would be appreciated
Looks like when you apply display:none initially to the div, clicking on the a link won't lead user to the targeted div anymore. To fix this, you can try using code to hide the div initially using slideToggle, of course the initial state of the div is display:block, slideToggle will hide it for you instead of setting display:none initially while clicking on the link will work expectedly (jump to the targeted div).
JS:
$(function() {
$("#whyDiv").slideToggle("slow"); //add this line to hide it initially
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
//append .focus() to focus the text
$("#whyDiv").slideToggle("slow").focus();
});
});
Updated Demo.
I've got a page with 2 buttons and 2 divs which are hidden.
When you click the first button the first div should appear, and if you click the second button the second div should appear.
I've managed to get that to work, but what I can't get to work is, that if I have the first div open, and click the second button, I would like it to show the second div and close the first div.
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("vis");
$(".hg_facebook").toggleClass("skjul");
});
});
$(document).ready(function() {
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("vis");
$(".hh_facebook").toggleClass("skjul");
});
});
Here is my fiddle:
http://jsfiddle.net/4mWLk/4/
Best regards
Martin
your js code is a bit incorrect.
You call twice $(document).ready(function() { ... Is enough once time.
try this:
$(function(){
$("button.hh").on("click", function(){
$(".hh_facebook").show();
$(".hg_facebook").hide();
});
$("button.hg").on("click", function(){
$(".hh_facebook").hide();
$(".hg_facebook").show();
});
});
see the updated fiddle: http://jsfiddle.net/4mWLk/5/
update if you want to hide div after clicking on same button: http://jsfiddle.net/4mWLk/8/
Use toggle instead of show (for your comment at my answer)
PS: I updated CSS because there was not neccessary.
If you want it with classes so you can have more control over the effect in case you decide to change it later, you should do it like this:
http://jsfiddle.net/4mWLk/7/
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("skjul vis");
$(".hg_facebook").removeClass("vis").addClass("skjul");
});
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("skjul vis");
$(".hh_facebook").removeClass("vis").addClass("skjul");
});
});
Html:
<div class="hh_facebook skjul">test1</div>
<div class="hg_facebook skjul">test2</div>
What it does is like this:
first the divs start with skjul class so they are in hidden state.
when a button is pressed, toggle both the skjul and vis classes (one is removed, the other is added)
make sure the second div is hidden.
i have div-1 and div-2. when a user clicks on div-1 div-2 is shown. This operates using jquery as a toggle function so when a user re-clicks div-1, then div 2 is hidden again. now i want to add a statement to my jquery that says if the user clicks to another area of the page so an area which is not div-1 then to also hide div-2. can someone please show me how i might do this as i am brand new to jquery and javascript.
thanks
<script type="text/javascript">
$('.notifications').click(function() {
$('.drop_down_column2').toggle();
return false;
});
</script>
It's pretty straightforward:
$('body').click(function() {
$('.drop_down_column2').hide();
});
Because you are returning false from your .notifications click handler, jQuery will prevent propagation of the event up to the body. So in essence, any time you click anywhere, except .notifications, your div will hide.
I have a page and I want to show some paragraphs after clicking a link, before that it should be hidden. So i wrote a simple JQuery code, but the problem is when I click the open link all the other hidden divs are also shown. My code is given below please advice how to solve the issue.
HTML
<div>
Read More
<div class="expand_div">
<img src="images/close_button.gif" width="50" height="12" alt="Close" border="0" />
<p>My hidden content goes here..</p>
</div>
</div>
and I want to repeat the above <div> block 7 times. So when I click the first div's Read more button the remaining 6 hidden divs are also showing!!!
JQuery
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$('.expand_div').show();
});
$('a.close_div').click(function(){
$('.expand_div').hide();
});
});
</script>
how to solve this issue..?
any answers would be appreciated!
Thanks
Paul
try this instead of your JQuery code:
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).parent().find('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().hide();
});
});
</script>
The problem with your code is that it's selecting ALL divs inside your page. and this is not what you want.
to solve this issue, this code is only limiting the scope of the action to the current link container, so the other divs will remain as is without any change.
Well, the selectors will select all elements with that class. If you keep your structure like this, you can do the following:
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).next().show();
});
$('a.close_div').click(function(){
$(this).closest('.expand_div').hide();
});
});
As the div is the next sibling of the open link, next() will select the div and show it. The close link on the other side is a descendant of the div. closest() will find the closest ancestor that matches the selector.
Of course there are also other ways to select the elements.
See a working DEMO.
In your open event you need to open the "next" element in the DOM:
$('a.open_div').click(function() {
$(this).next().show();
});
In your close event you need to close the enclosing (parent) element:
$('a.close_div').click(function() {
$(this).parent().hide();
});
see http://jsfiddle.net/raybellis/vZbp3/
You are getting all "expand_div" elements and showing them. You need to only select the appropriate elements as related to this element.
<script language="JavaScript">
$(document).ready(function(){
$('a.open_div').click(function(){
$(this).siblings('.expand_div').show();
});
$('a.close_div').click(function(){
$(this).parent().siblings('.expand_div').hide();
});
});
</script>
I would like to show a <div> that displays "Saved!" every time the user clicks the save button.
I have here some jQuery code but it works only once. The second time I click the button the div won't show up.
$("#loading").html("Saved!").fadeOut(4000);
Possibly because it is hidden. Try:
$("#loading").html("Saved!").show().fadeOut(4000);
Or
$("#loading").html("Saved!").fadeIn(200).fadeOut(4000);
That is because the div is still "faded out"
try this...
$("#loading").html("Saved!").fadeOut(4000, function(){
$("#loading").empty();
$("#loading").show();
});
It empties the #loading div and then re-displays it and readies it for the next click.
You need to bind a click event to a a div.
$(document).ready(function() {
$('#element').click(function() {
$('#para').html("Saved!").fadeOut(4000);
});
});