SlideUp a div if any other div is moved using jQuery

Question

I made a function for marking up various divs by clicking various links. Below is the base code. However, there is a small problem, which, for example, if I click on the first link, it will shift the div down. Now, if I click on the following link, it holds the first div and moves the second div. However, I want to make it so that if there is a div, and I click on any link, it should shift the previous div and move to a newer one. I will attach you your help in this regard. Thanks.

$("a.about").click(function(){ $("#about").slideDown("slow"); }); $("a.info").click(function(){ $("#info").slideDown("slow"); }); $("a.contact").click(function(){ $("#contact").slideDown("slow"); }); 

Answer 1

You might want to learn the jQuery UI accordion .

Answer 2

you can do this, usually by adding a class to all sections that you want to control, and then slideUp () in that class at the beginning of each click.

 $('a.xxx').click(function(){ $('.sliders').slideUp() // slide down other div here }); 

this will actually shift ALL sections using class sliders, but it will give the illusion that a previously clicked div is being pushed, since only one should ever be lowered.

Answer 3

If the expanding divs are siblings, as well as the correspondence between class names and identifiers as described, you can do something like this:

 var links = ['a.about','a.info','a.contact','a.etc']; $( links.join(',') ).click( function(e){ e.preventDefault(); $('#' + this.className).siblings().slideUp('slow').end().slideDown('slow'); }); 

If all the links are inside a container, you can simplify the following:

 $('div#nav-container').find('a').click( function(e){...} ); 

Answer 4

The easiest approach is to provide an additional common class name to all the elements that you are trying to shift up / down and then connect the actual bindings to the elements using the href attribute on the anchor. The next javascript bit (with changes in HTML) will perform the same functions as your current javascript, and also make it easier to add additional sliders:

 # the html <a class='about slide-control' href='#about'>toggle the about section</a> <a class='info slide-control' href='#info'>toggle the info section</a> <a class='contact slide-control' href='#contact'>toggle the contact section</a> <div class='slider' id='about'> this is the about section </div> <div class='slider' id='info'> this is the info section </div> <div class='slider' id='contact'> this is the contact section </div> # the javascript $('a.slide-control').click(function() { $('div.slider').slideUp(); var target = $(this).attr('href'); $(target).slideDown('slow'); }); 

You can add a new slider by simply adding the correct HTML:

 <a class='slide-control' href='#new_section'>Tell me more about this new section!</a> <div class='slider' id='new_section'> This is a great paragraph about the new section on our website! </div> 

---

Alternatively, you can use existing classes and simply add a .slideUp method .slideUp to your other elements in front of your .slideDown :

 $('a.about').click(function() { $("#info").slideUp('slow'); $("#contact").slideUp('slow'); $("#about").slideDown('slow'); }); // repeat for each click handler