We Keep Coding

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/

Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});

Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

close one modal and open a new modal with one button

I am using bootstrap and have a one modal that I would like to have a link on to another modal. I can't seem to figure this out and currently I am using the modal.close()and .modal('show') but that is not working.
$('a#to3heart').click(function(){
$('#portfolioModal2').modal({onShow: function (dialog) {
$.modal.close()
$('#portfolioModal1').modal('show');
return false;
}
});
});

use:
$("#modal1").modal('hide');
$("#modal2").modal('show');
see: http://getbootstrap.com/javascript/#modals
demo: http://jsfiddle.net/5qCm9/

I tried all the above answers posted ,none of them seems to work in my case finally,i wrote this .
This will hide any active modal on your screen and show the only clicked modal
$('[data-toggle="modal"]').on('click', function() {
$('.modal').not($(this).data('target')).modal('hide');
});

I had a similar issue and solved it with a generic jQuery solution.
It just hides all modal that are not targeted.
$('button[data-target]').click(function () {
$('.modal').not($(this).data('target')).modal('hide');
});

jquery: if other slidetoggle is enabled (visible), close before initiating new slidetoggle

I've got the following script. I've got 3 div's that are all display: hidden; that I want to drop down from the top of the page using slideToggle.
<script type="text/javascript">
$(document).ready(function(){
$("#irN").click(function () {
$('#irN_dd').slideToggle();
});
$("#myir").click(function () {
$('#myir_dd').slideToggle();
});
$("#myirmsg").click(function () {
$('#myirmsg_dd').slideToggle();
});
});
</script>
HTML:
<a id="irN">irN</a>
<a id="myir">myir</a>
<a id="myirmsg">myirmsg</a>
This script works great. The only issue is that all 3 can be opened at the same time. I only want 1 to be able to be open at any given time. So...how would I modify the script to do the following..
... if none are open and the viewer clicks one of the id's, it opens....
... if one of the divs are open and the viewer clicks another one of the id's, it slides the one open up and then slides the new one down.
Thanks in advance!

Edit in regard to comments
If you didn't want to check the markup etc, you could use something like the following to acheive what you wanted:
$("#irN, #myir, #myirmsg").click(function () {
var example = "#" + this.id + "_dd";
$(example).siblings("div[id$=_dd]").slideUp()
.is(":visible")
? $(example).delay(1000).slideToggle()
: $(example).slideToggle();
});
This fits all your functions into one concise event (could probably look nicer but I'm too tired to think of anything better right now).
jsFiddle example

jquery how to hide div on click a link

$('#banner').click(function show_stuff() {
var s = document.getElementById("dropdown_c");
s.style.height = "200px";
s.style.border = "1px solid #e9eaee";
});
when banner is clicked dropdown_c div is showed
how to hide dropdown_c when clicking banner again
here is my code only to show the div not to hide
i want to allow user to show/hide this div on clicking banner

Try this. Toggle() recognizes the current state of the element (show / hide) and applies the opposite effect to the selected element.
CODE:
$('#banner').on('click', function(){
$('dropdown_c').toggle();
});

$('#banner').click(function() {
$("#dropdown_c").toggle();
});

It's really easy to implement, all you have to do is use the method toggle() on the dropdown everytime banner is clicked. Also just a side note, you should stick to one naming / selecting convention just for more legible code! Hope this helps :)
$('#banner').click(function toggle_stuff() {
$('#dropdown_c').toggle(); // you can also use slide or fade
});
JSFIDDLE:
http://jsfiddle.net/DSTQw/

$(document).ready(function(){
$('a').click(function(){
if($('.hide').is(':hidden')){
//alert('hiden');
$('.hide').slideDown('1000');
}
else{
$('.hide').slideUp('1000');
}
});
});
Fiddle here

jQuery MouseEnter/Leave with fadeIn() flickery

I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.

Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}