We Keep Coding

jQuery UI Accordion - "If Statement" for Open/Closed Panels

I have the below code that moves any clicked accordion panel to the top of the page. However, I have some accordion panels open by default, and I don't want the opened ones animating when someone closes them. Therefore, I want the "scroll to top" code to only apply to closed panels. So I guess I need it within some kind of "if statement" detecting the open/closed state. Any idea how to accomplish this?
<div id="accordion">
<!--Open panel by default-->
<h3 class="accordion">Question</h3>
<div class="content">
<p>text</p>
</div>
<!--Closed panel-->
<h3 class="accordion">Question</h3>
<div class="content">
<p>text</p>
</div>
</div>
<script>
jQuery(function() {
var defaultPanel = parseInt(getParamFirst('section'));
jQuery( "#accordion" ).accordion(
{active: defaultPanel,
autoHeight: false,
collapsible: true,
heightStyle: "content",
animate: 200}
).show();
});
//////////////////////////////////////////////////
//Fire the below code only on closed panels
//////////////////////////////////////////////////
jQuery('.accordion').bind('click',function(){
var self = this;
setTimeout(function() {
theOffset = jQuery(self).offset();
jQuery('body,html').animate({ scrollTop: theOffset.top - 110 });
}, 200);
});
</script>

Add .not('.ui-state-active'):
jQuery('.accordion').not('.ui-state-active').bind('click',function(){
...

delegate jQuery toggle event to the rest of the document

I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup

You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/

How can I show all visible tooltips when using jQuery UI with tabs and accordion?

I'm working on a web-application and I use jQuery UI with tabs and accordions and qTip2 (with tooltips).
I'm trying to create a "help" function that would toggle the display of all visible tooltips - and when the user change tab or accordion, then the tooltips should update based on which tooltips that should be visible.
I've created a simple js-fiddle example that illustrates the problem pretty well.
http://jsfiddle.net/Z3My2/8/
HTML:
<div id="mainDiv">
<div id="mapContainer">
<div id="simple_map" style="display: inline-block">
<p title='MapTitle' data-qtip2Enabled>Place map here</p>
</div>
</div>
<button type="button" id="ShowHelp">Show all help messages</button>
<div id="tabs">
<ul>
<li>Search
</li>
<li>Search results
</li>
</ul>
<div id="queryTab">
<div id='search'>
<p>Options</p>
<div id='queryOptions'>
<h3>
<span id='option1' title='This is option 1' data-qtip2Enabled>Option 1</span>
</h3>
<div id='option1Div'> <a title="another title" data-qtip2Enabled>Some text</a>
</div>
<h3>
<span id='option2' title='This is option 2' data-qtip2Enabled>Option 2</span>
</h3>
<div id='option2Div' title="Some Title" style="display: inline-block" data-qtip2Enabled>LaLaLaLALA</div>
</div>
</div>
</div>
<div id="parametersTab">
<div id="parametersTabText">Text.
<br>
<p title='lorum ipsum' data-qtip2Enabled>More text with tooltip.</p>
</div>
</div>
</div>
<!-- this div is a pop, and don't actually appear -->
<div id="errorMessageDialog" title="Warning" hidden>this is not a qtip-title (with tag data-qtip2Enabled)</div>
</div>
Javascript:
$(document).ready(function () {
$("#tabs").tabs();
$('#ShowHelp').click(toggleHelp);
$("#queryOptions").accordion({
collapsible: true,
active: false,
heightStyle: "content"
});
$('[data-qtip2Enabled]').qtip();
});
var helpEnabled = false;
function enableHelp() {
unbindHelp();
$("DIV#tabs li").on("click", function () {
showHelp();
});
$("DIV#search span").on("click", function () {
showHelp();
});
helpEnabled = true;
}
function unbindHelp() {
$("DIV#tabs li").unbind("click");
$("DIV#search span").unbind("click");
}
function toggleHelp() {
if (!helpEnabled) showHelp();
else {
helpEnabled = false;
unbindHelp();
//$('[data-qtip2Enabled]').qtip('destroy');
$(".qtip-content").hide();
$('[data-qtip2Enabled]').qtip({
show: 'mouseenter',
hide: 'mouseleave',
});
}
}
function showHelp() {
if (!helpEnabled) enableHelp();
$(".qtip-content").hide();
$('[data-qtip2Enabled]').each(function () {
$(this).qtip({
show: true,
hide: false,
events: {
focus: function (event, api) {
api.set('position.adjust.y', -5);
},
blur: function (event, api) {
api.set('position.adjust.y', 0);
},
},
});
});
}
Any help or pointers would be greatly appreciated :)
Edit: Updated the code and fiddle based on some experiments and Rakesh Singh's answer.
I'm still wondering how to not display the tooltips that should be hidden - all tooltips are displayed now, but they are updated to the correct places when the UI changes.

Just put
$("DIV#tabs li").on("click",function(){
showHelp();
});
in jquery ready function.
i hope this will help.

I solved the rest of my problem, and it was a quite simple solution, so I'm marking Rakesh' answer as the accepted since it helped me a lot solving this
The solution to filter out what tooltips to show or not was to add a simple if-sentence:
$('#tabs [data-qtip2Enabled]').each(function() {
if ($(this).is(':visible')) {
$(this).qtip({
show : true,
hide : false,
events : {
focus : function(event, api) {
api.set('position.adjust.y', -5);
},
blur : function(event, api) {
api.set('position.adjust.y', 0);
},
},
});
}
});
And bind this (with a hide()) to the on-change of $("DIV#tabs li") and $("DIV#tabs h3")

How can I render a form after a button is clicked in Colorbox?

I'm trying implement a button inside a Colorbox that will update the modal and render a form.
An example of this is Pinterest's add functionality. "Homepage > Add a Pin > Pin URL"
I've tried copying Colorbox's inline HTML example.
<script type="text/javascript">
$(document).ready(function () {
$(".inline").colorbox({inline:true, width:"50%"});
$('a[rel="colorbox"]').live("click", function() {
$.colorbox({
open: true,
href: this.href
});
return false;
});
});
</script>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>Add a Promotion</strong></p>
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
<p>Updating Content Example:<br />
<a class="ajax" href="**shared/promotion_form**" rel="colorbox">Add a Promotion</a></p>
</div>
</div>
The problem is that the form is _promotion_form.html.erb so I can't link to it.

Try moving your selector up a level, and updating to jQuery 1.7.1
Maybe something like this:
$('body').on("click", "a[rel="colorbox"]", function() {
So this way you're watching the body for any element that has that selector "a[rel='colorbox']".
Hope this helps.

the div that show() called disappeared in the next second

When I click the div that suppose to show, it just showed in a second and then disappeared.
How do I make it stay display on the page?
Here is the code
<div class="circle0">
<h4>sketch & drawing</h4>
</div>
<div class="sec_down" style="display: none;">
<h1>{Mask}</h1>
</div>
<script>
$("#show_1").click(function () {
$(".sec_down").show();
});
</script>

You need to prevent the default click handling in the link so it won't process the href in the link and reload the page. in jQuery, you can do that by adding return(false) to the click handler:
<div class="circle0">
<h4>sketch & drawing</h4>
</div>
<div class="sec_down" style="display: none;">
<h1>{Mask}</h1>
</div>
<script>
$("#show_1").click(function () {
$(".sec_down").show();
return(false); // prevent default handling of the click
});
</script>

Change href="" to href="#" or break the default action of the link by using return false.