We Keep Coding

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 Toggle & Offclick

I'm kind of a newbie when it comes to jquery so I wondered if someone could help me.
I've made a toggle function. When you click on the user_button the user_info shows, when you offclick the user_info disapears. But now I want to let the user_info disapear also when you click again on user_info (so when it is open it closes).
This is the jquery I have. Thanks in advance!
$(document).ready(function(){
$("#user_button").click(function(){
$("#user_button").addClass("active")
$("#user_box").toggle();
});
$("#user_box").mouseup(function(){
return false;
});
$(this).mouseup(function() {
$("#user_button").removeClass("active");
$("#user_box").hide();
});
});

Could you post a testable example on for example jsfiddle.net? This allows other to "play" with the actual code.
Try to take look at methods suchas show, hide, toggle toggleClass etc.

Take your code => http://jsfiddle.net/3Nxz2/3/
$(document).ready(function(){
$("#user_button").click(function(){
//alert("click");
$("#user_button").addClass("active")
$("#user_box").toggle();
});
$("#user_box").mouseup(function(){
//return false;
});
$(this).mouseup(function() {
$("#user_button").removeClass("active");
//$("#user_box").hide();
});
});

Open page in modal box

I have a script that restrict the click on a href link if there;s no checkbox selected. I want the editpr.php open in modal box. The problem is I'm not familiar with modalbox. Any help?
<a class="button edit" style="cursor:pointer;" ><span><b>Edit Purchase Request</b></span></a>
<a class="button remove" style="cursor:pointer;" name="remove"><span><b>Remove Purchase Request</b></span></a>
This is my script
jQuery(function ($) {
$('a.button.edit, a.button.remove').click(function () {
if ($('input[name="checkbox[]"]:checked').length == 0) {
return;
}
if (!confirm('Do you want to continue?')) {
return
}
var frm = document.myform;
if ($(this).hasClass('edit')) {
frm.action = 'editpr.php';
}
if ($(this).hasClass('remove')) {}
frm.submit();
})
})

You can't open a page in a modal box just with pure javascript, as "alert()" or "confirm()".
To do what you want you need to put your 'editpr.php' content inside a div, and make it modal with CSS.
Actually we have a lot of libraries that make it happen easily, I think that most used is: http://www.jacklmoore.com/colorbox/
Check the "Outside HTML (Ajax)" and "Outside Webpage (Iframe)" on this example page, probably is the same thing that you want to do: http://www.jacklmoore.com/colorbox/example1/

There are some useful jQuery plugins that can make your job really easy. I suggest you give them a try. Here you have an example.

Since you are already using jQuery you could use jquery-ui.
They have an exmple of what you want to do here:
http://jqueryui.com/dialog/#modal
Once you get your modal dialog element setup, all you have to do is make and XHR for editpr.php, load the result into the elements innerhtml, then display the dialog.
// setup your modal dialog
var el = $( "#editpr-dialog" ).dialog({
// ... (other config options)
modal: true
});
// XHR editpr.php and show the dialog box
$.get('editpr.php', function(data){
el.html(data).dialog('open');
});

The custombox plugin has a lot of beautiful features and works amazingly with Jquery: http://dixso.github.io/custombox/

close previous opened div if a div is already opened

Will try to explain what i mean :)
I have two hidden divs that opens with jquery, they both works quite good... when I'm using them separated... But if I open the div when the other one is open, the first one keeps being open in the background... I would like that one to close.
Is there an if else function i can use ?
This is what i have so far.
$(document).ready(function(){
$(".contactDiv").hide();
$(".show_hide_contact").show();
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
});
});
$(document).ready(function(){
$(".loginDiv").hide();
$(".show_hide_login").show();
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
});
});
I have created a jsfiddle to show some more.
http://jsfiddle.net/h2Hfg/

Just slide the other div too:
$('.show_hide_contact').click(function() {
$(".contactDiv").slideToggle();
$(".loginDiv").slideUp();
});
$('.show_hide_login').click(function(){
$(".loginDiv").slideToggle();
$(".contactDiv").slideUp();
});
Very nice of you to include the jsFiddle :)

I am not sure there is a function exactly that does that but you can do it manually. Check it out
$(document).ready(function(){
$(".contactDiv").hide();
$(".loginDiv").hide();
$(".show_hide_contact").show();
$(".show_hide_login").show();
$('.show_hide_contact').click(function(){
$(".loginDiv").hide();
$(".contactDiv").slideToggle();
});
$('.show_hide_login').click(function(){
$(".contactDiv").hide();
$(".loginDiv").slideToggle();
});
});

Found out how to.
I just added the hide function to the divs.
$('.show_hide_contact').click(function(){
$(".contactDiv").slideToggle();
$(".loginDiv").hide(); /* there is hiding prev opened tag*/
});

Close a cluetip when the mouse is off of the link

Is there an option to close a cluetip dialog when the mouse is moved off of the link? There is the mouseOutClose option, but it doesn't close the cluetip if you don't hover over it first.
Here is an example:
http://plugins.learningjquery.com/cluetip/demo/ - the first link under the jTip Theme

In the clueTips core file
replace the code:
if (opts.mouseOutClose) {....}
with
if (opts.mouseOutClose) {
var closectip;
$cluetip.hover(function() {
clearTimeout(closectip);
},
function() {
$closeLink.trigger('click');
});
$this.hover(function() {
clearTimeout(closectip);
}, function() {
closectip = setTimeout(cluetipClose, 1000);
});
}
I found the solution from a jquery forum here is the link
http://plugins.jquery.com/content/cluetip-doesnt-close-mouseout
Its working for me.

I had the same trouble, and I got a solution.
It's working.
So, what we all want is a way to
1- showing cluetip when link is hovered, then discard it when mouse goes out
2- BUT keep cluetip opened if the mouse did go inside so that it can click on links inside the cluetip
This is how to do it.
Just add this parameter :
sticky: true,
onShow: function(){
$('.mylink').mouseout(function() { // if I go out of the link, then...
var closing = setTimeout(" $(document).trigger('hideCluetip')",400); // close the tip after 400ms
$("#cluetip").mouseover(function() { clearTimeout(closing); } ); // unless I got inside the cluetip
});
}
This is it !

It's because the sticky option is set to true...