Develop Reference

Click button with hide and show

Need get this fixed as I've been trying for a month. Can you look at my website for the button that doesn't work?
http://www.insightenergy.eu/about-us.php
What is wrong with it?

try the following code to expand or minimize the container.
$('.expander').click(function(){
if(condition){
$('.expander').next().show();
}
else{
$('.expander').next().hide();
}});

You need to attach an event to your buttons, and when I debug I get nothing on click.
Looking at your web I think you maybe need something like that:
Your HTML structure is similar to this one:
HTML
<ul class="blog-post-full-list">
<li >
<div >0</div>
<div class="expandible">Content</div>
</li>
<li >
<div >1</div>
<div class="expandible">Content</div>
</li>
<li >
<div >2</div>
<div class="expandible">Content</div>
</li>
<li >
<div >3</div>
<div class="expandible">Content</div>
</li>
</ul>
So in your code you can use the JQuery function toggle:
JS
$(".blog-post-full-list>li").on('click',function(){
/*
*The object this is the li you've clicked on
*The jQuery function toggle swiches the display ON OFF
*The number 300 means the duration of the animation. If you don't
* want to animate it just remove the parametter
*/
$(this).find(".expandible").toggle(300);
})
http://jsfiddle.net/vzkUL/2/
You can add it into a JS file or inline in your code as follows:
<script>
//JQuery onReady
$(function(){
$(".blog-post-full-list>li").on('click',function(){
//The object this is the li you've clicked on
//The jQuery function toggle swiches the display ON OFF
//The number 300 means the duration of the animation. If you don't want to animate it just remove the parametter
$(this).find(".expandible").toggle(300);
})
});
</script>

How to disable tab clicks in spry tabbed panel?

So far I have coding for making the tab's display property to none until the button is clicked. The code is given below.
The problem is only one tab is showing at a time. What I want is, all tabs should be visible but not clickable. Please help me with the code if possible or just give me some suggestions, I will try coding it myself and will post it here as answer.
Thanks!
In
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
<li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
</ul>
In (with this only the first tab is visible and the other tabs are non-visible)
<script type="text/javascript">
$(document).ready(function(){
/*initially hide all tab except tab1*/
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();
/*show tab2 when click the complete button by hiding all tabs*/
$('.complete').on('click', function(){
$('#tab2').siblings().slideUp();
$('#tab2').slideDown();
});
});
</script>
In JS: (at button click) (With this the second tab will be visible and the rest 3 tabs will be non-visible)
TabbedPanels1.showPanel(1);
$('.TabbedPanelsTabGroup').children().hide().eq(1).show();

Try this
$('.TabbedPanelsTabGroup').off("click");
or
$('.TabbedPanelsTabGroup li').off("click");
jQuery off().
Let me know if it not works.
UPDATE 1
$('.TabbedPanelsTabGroup li').on("click", function(){
return false;
});
Or if you are using jquery tab, look: http://jqueryui.com/demos/tabs/#event-select

Thanks for all the help, I have finally found the answer myself. It is actually quite simple. I just commented Spry.Widget.TabbedPanels.prototype.onTabClick event in the .js file.
/*Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
this.showPanel(tab);
return this.cancelEvent(e);
};*/
Now the tabs are not clickable and works the way I want it to.

use this
$('.TabbedPanelsTabGroup').children().unbind("click");
$('.TabbedPanelsTabGroup').children().eq(0).bind("click");
instead of doing
$('.TabbedPanelsTabGroup').children().hide().eq(0).show();

jQuery hover show div toggle

I'm working on this pretty easy site but it's been a while since I fiddled with jQuery and I think I'm doing something wrong here.
Here you can preview the idea with jsFiddle http://jsfiddle.net/rGb34/1/
There are a few problems with the jQuery.
If you hover over the yellow button the yellow content starts toggling.
If you hover over a button and then back off it the div disapears (due to the toggle function) but I would like to have the last div active even when there's no hover.
Does anyone have a good tip for me so I can finish this?

First of all: Don't use same id name with another tag. In your example it was id="slider" .
Here is jsFiddle to play with (I have edited your html and css too)
You can do that with this way, much more solid:
jQuery:
jQuery(document).ready(function() {
$('.greenC, .blueC, .orangeC').hide();
$('.nav li').hover(function() {
var takeClass = $(this).attr('class');
// takes class hovered element. example: '.yellow'
$('.slider').hide();
$('.'+ takeClass + 'C').show();// shows the element '.yellowC'
});
});​
And your html should be like this:
<div class="yellowC slider">...</div>
<div class="greenC slider">...</div>
<div class="blueC slider">...</div>
<div class="orangeC slider">...</div>
<div class="wrap">
<ul class="nav">
<li class="yellow">Fiducairy services</li>
<li class="green">Licensing</li>
<li class="blue">Payment processing</li>
<li class="orange">E-zone colocation</li>
</ul>
</div>​

$('.green, .blue, .orange, .yellow').hide(); if you hide yellow also, it works fine for me..is this what you want?

If you want the first div to show up properly on load, you have to be more specific on your .yellow event handler
$('.y_active, .yellow').hover(
function() {
$('.yellow').show();
$('.green').hide();
$('.blue').hide();
$('.orange').hide();
}, function() {
$('.yellow').hide();
});
DEMO

How do I create a jquery function that will override my css hover while javascript is enabled?

I have built a drop down menu in pure css and it works perfectly. Right now it only works when hovered over. Hovering over #headerNav causes the menu to my .dropdownMenu to drop down and as soon as cursor is taken away from dropdownMenu or the #headerNav the menu disappears.
Because I want users with js enabled to have a better experience, I've decided to use some jquery to get the same effect as click here. Which basically keeps the drop down menu open after a click and click only not hovering.
By default I have set .dropdownMenu to "display: none" and then to show the drop down menu I have something like this:
#headerNav:hover .dropdownMenu {
display:block;
//more code
}
Here is my html:
<header>
<div id='headerContent'>
<div id='LogoHolder'>
</div>
<nav id='headerNav'>
<ul>
<li id='photoThumbnail'></li>
<li id='currentUser'>
<ul class="dropdownMenu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
I've been experimenting for 2 days now and can't seem to come up with a way of doing this. I'd appreciate some help with clear examples. Thanks
Kind regards

Instead of targeting your nav by it's ID, add a class to it, say hover-nav and update your CSS accordingly:
.hover-nav:hover .dropdownMenu
Then in your javascript remove the css class from the ul
$(#headerNav').removeClass('hover-nav');
and use your click to show plugin as you normally would.

I think the most elegant way to deal with javascript enabled/disabled is to add :
<html class='no-js'>
then removing the class with Javascript.
So, in your case, you would use
.no-js #headerNav:hover .dropdownMenu {
display:block;
}
to target only users with javascript disabled.
See : http://paulirish.com/2009/avoiding-the-fouc-v3/ for more details.

Nathan hit it on the head. I'll go ahead and paste the code, since I was already nearly finished with it.
CSS
#headerNav .hideable{ display:none; }
#headerNav:hover .hideable{ display:block; }​
HTML (just add hideable to your UL)
<ul class="dropDownMenu hideable">
jQuery
$('.hideable').hide().removeClass('hideable');
$('#headerNav').click( function(){
$(this).find('.dropDownMenu').slideToggle();
});​​​​​​​​​​​​​​​​​​​​​​
Replace above with this jQuery to add the ability to close the menu if anywhere else is clicked.
$('.hideable').hide().removeClass('hideable');
$('#headerNav').click( function(e){
$(this).find('.dropDownMenu').slideToggle();
e.stopPropagation();
});​​​​​​​​​​​​​​​​​​​​​​
$('html').click( function(e){
$('.dropDownMenu').slideUp();
});

Try something like this:
$(document).ready(function(){
$('#headerNav .dropDownMenu').hover(function() {
$(this).show();
});
$('*:not(#headerNav .dropDownMenu)').click(function() {
event.stopPropagation();
$("#headerNav .dropDownMenu").hide();
});
});

Your CSS is .dropdownMenu
Your Html is class="drop DownMenu"
CSS is case sensitive.

jQuery Mobile Navigation Tabs

I want to have a tab-navigation in my jQuery Mobile project. I know I can use the data-role 'navbar' but I only want to change the content below that navbar without swiping to a new page. So far I could only have several different pages with the same navbar linking to each other but that's not what I want.
Can anyone help me?
Thank you in advance

You can use the jQuery Mobile navbar styling but use your own click-handler so instead of changing pages the click will just hide/show the proper content on the same page.
HTML
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div><!-- /navbar -->
<div class="content_div">onLoad Content</div>
<div id="a" class="content_div">Some 'A' Content</div>
<div id="b" class="content_div">Some 'B' Content</div>
JAVASCRIPT
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
return false;//stop default behavior of link
});
CSS
.content_div {
display: none;
}
.content_div:first-child {
display: block;
}
Here is a jsfiddle of the above code: http://jsfiddle.net/3RJuX/
NOTE:
Each of the links in the navbar have a "data-href" attribute set to the id of the div (or whatever container you want to use) that will be displayed.
Update
After 1 year I came back to this answer and noticed that the delegated event handler selector can be optimized a bit to utilize a class rather than an attribute (which is a lot faster of a lookup):
$(document).delegate('.ui-navbar a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
});
Update
This code can be made to be more modular by using relative selectors rather than absolute ones (like $('.content_div'), as this will select all matching elements in the DOM rather than just ones relative to the button clicked).
//same selector here
$(document).delegate('.ui-navbar ul li > a', 'click', function () {
//un-highlight and highlight only the buttons in the same navbar widget
$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
//this bit is the same, you could chain it off of the last call by using two `.end()`s
$(this).addClass('ui-navbar-btn-active');
//this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM
$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
});​
This allows you to nest tabs and/or have multiple sets of tabs on a pages or pseudo-pages.
Some documentation for the "relative selectors" used:
.closest() : http://api.jquery.com/closest
.siblings() : http://api.jquery.com/siblings
Here was an example: http://jsfiddle.net/Cfbjv/25/ (It's offline now)

UPDATE: Check out my jsfiddle at http://jsfiddle.net/ryanhaney/eLENj/
I just spent some time figuring this out, so I thought I would answer this. Note I am using multi-page single file, YMMV.
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
$("div[data-role=page]").bind("pagebeforeshow", function () {
// prevents a jumping "fixed" navbar
$.mobile.silentScroll(0);
});
$("a[data-role=tab]").each(function () {
// bind to click of each anchor
var anchor = $(this);
anchor.bind("click", function () {
// change the page, optionally with transitions
// but DON'T navigate...
$.mobile.changePage(anchor.attr("href"), {
transition: "none",
changeHash: false
});
// cancel the click event
return false;
});
});

#Mike Bartlett
I struggled with this myself but after breaking Jasper's code down it looks like there is a slight nuance from his posted code and that on the jsfiddle page.
Where he has posted
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });
I found it useful to change the last line to simply call whatever content you set the "data-href" value to be in your navbar.
$('div[data-role="navbar"] a').live('click', function () {
$(this).addClass('ui-btn-active');
$('div.content_div').hide();
$($(this).attr('data-href')).show();
});
my navbar html then reads
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
Which is pretty much the same as his but for some reason I got no "error loading page" message. Hope that helps...

Please refers this below link for all kind of nav bar in jquery
http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
thanks

I noticed that the question was asked four years ago, so i'm not sure whether the Tab widget were available with JQ Mobile at that time. anyway i'm a guy from 2015
the awesome solution that i use as below with Jquery Mobile 1.4.5
<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
        <li>Acura</li>
        <li>Audi</li>
        <li>BMW</li>
        <li>Cadillac</li>
        <li>Ferrari</li>
    </ul>
  </div>
</div>

I liked #Ryan-Haney's answer, but thought I'd add my own rough draft in, if anyone can find a more efficient way of doing this, then please add a comment.. thanks
I did it this way because I have a bunch of "include" files that get loaded into the DOM at runtime, so I couldn't hard-code that the n-th tab is highlighted/active for each page like Ryan could. I also do have the luxury of having only a single tabbar in my app.
$(document).delegate('.ui-navbar a', 'tap', function ()
{
$('.ui-navbar').find('li').find('a').removeClass('ui-btn-active');
$('.ui-navbar').find('li:nth-child(' + ($(this).parent().index() + 1) + ')').find('a').addClass('ui-btn-active');
});