aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes jquery accordion and tabs on the same page Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jquery accordion and tabs on the same page" Watch "jquery accordion and tabs on the same page" New topic
Author

jquery accordion and tabs on the same page

francois dulmet
Greenhorn

Joined: Feb 08, 2011
Posts: 9
Hello everybody,

I have a problem with jquery widgets : I am not able to put an accordion and tabs on the same page.
Each alone works, but if I try to put both, only one of them work...

Here is the code I tried (tabs appear normally, but only the text of the accordion appear):

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>accordion&tabs</title>

<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>

<link type="text/css"
href="accordion/css/custom-theme/jquery-ui-1.8.9.custom.css"
rel="stylesheet">
<script type="text/javascript"
src="accordion/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
src="accordion/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>

<link type="text/css"
href="tabs/css/custom-theme/jquery-ui-1.8.9.custom.css"
rel="stylesheet">
<script type="text/javascript"
src="tabs/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
src="tabs/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>

</head>


<body>

<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>

<br>

<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh</div>
<div id="tabs-3">Nam dui erat, auctor a</div>
</div>
<strong></strong>
</body>
</html>



Do you know what's wrong ?


Thank you very much for your help,

Francois
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

Hmmm, I'm trying to look at your code, but the stubborn forum software has made it look all wonky. If you use CODE tags when posting code to the forums (see the FAQ at ⇒ UseCodeTags ⇐) they tell it "Hey! Keep your hands off my formatting!" and your code will look just like when you cut and pasted it into the reply. Cool, no?

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
francois dulmet
Greenhorn

Joined: Feb 08, 2011
Posts: 9
Ok, here is the code appearing hopefully better :
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

Why are you including the jQuery UI library twice?

By the way, indenting your code would make it a lot easier to read as well.
francois dulmet
Greenhorn

Joined: Feb 08, 2011
Posts: 9
I am a beginner in coding...
I did not realise I wrote twice the same thing ! (jquery UI library)
I tried again with the UI library only once, but it doesn't change anything.

I put indents (by indents you mean spaces before new divs or stuff like this ?), I think it clearer now, but maybe not perfect.

Thank you to teach me these tips, and thank you for your help.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

Much better -- it makes the code so much easier to read! Good job.

Removing the redundant stuff is an important step, even if it doesn't fix the problem because it eliminates it as a potential problem. (And make the code much clearer and more efficient as well).

Hmmm, on a quick inspection I'm not seeing an immediate issue. I'm pretty sure that I have used an accordion inside a tabset in the past though...

In your original post, you said that it doesn't work, but you didn't say what actually did happen. Is one or the other widget just not rendering? Be explicit in your description of what you are seeing.

Also, are you seeing any script errors? Use a browser with a JavaScript console to see what's going on.
Gregg Bolinger
GenRocket Founder
Ranch Hand

Joined: Jul 11, 2001
Posts: 15299
    
    6

One thing I noticed was that the markup for the accordion isn't entirely correct.



I don't believe you need the DIV element surrounding your H3 and DIV which is the body on the accordion section. So it should be




GenRocket - Experts at Building Test Data
francois dulmet
Greenhorn

Joined: Feb 08, 2011
Posts: 9
When I try my code with a browser, the accordion appears properly, but the tabs don't : I only see their texts.
(by the way, I want to see them appearing seperately, not the accordion inside the tabs (you told me you used an accordion inside a tabset), but maybe is it a similar issue...)

The firefox console tells me that $("#tabs").tabs is not a function.
I don't know what to write instead.
(trying "#tabs" or '#tabs' makes the same result)
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

The firefox console tells me that $("#tabs").tabs is not a function.

OK, that's odd. But it is the root of the problem. If the the tabs() function isn't being called, all the other changes in the world won't help.

But you say, the tabs() function is called if you remove the call to accordion()?
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Looks fine to me when I replace your links with the cdn links: http://jsbin.com/erule4/

Eric
francois dulmet
Greenhorn

Joined: Feb 08, 2011
Posts: 9
Bear :
Yes, the strange thing is that the tabs work alone, but they don't work if there is an accordion on the same page.
Do you know if I have to write something inside the brackets ? : $('#tabs').tabs();
By the way, what is the purpose of this line ?

Eric : what's the difference between my links and yours ?

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

francois dulmet wrote:$('#tabs').tabs();
By the way, what is the purpose of this line ?

It selects the element with the id value of tabs and then calls the jQuery UI tabs() method on it. This is the method that transforms the DOM elements into the tabset.

If the tabs() method isn;t being found, no transformation will take place, of course.

Eric : what's the difference between my links and yours ?

He's fetching the jQuery library files from a central repository.

It's possible your local files have been corrupted. Fetch the same files that Eric is using and see if you can get it to work.
francois dulmet
Greenhorn

Joined: Feb 08, 2011
Posts: 9
In fact, when you asked me why I typed twice the UI JQuery library, that's because each one is customised for each widget (accordion and tabs)

Using Eric's file is not really a solution for me because they are not customised as I chose on JQuery site.

I think I'm blocked with a mysterious bug...
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

francois dulmet wrote:In fact, when you asked me why I typed twice the UI JQuery library, that's because each one is customised for each widget (accordion and tabs)

That is not the way to do it!

You don't download multiple libraries customized for a particular widget -- you download one library customized with all the widgets that you intend to use.

Download the library again, choosing all the widgets and features you want into a single download.
francois dulmet
Greenhorn

Joined: Feb 08, 2011
Posts: 9
ok!!!

I just tried as you said and it works !
Now, both widgets I use refer to the same customised library.

In fact, I customised almost exactly the same the two widgets but not exactly the same....
What happens if you want to use two widgets customised differently (one in blue, the other in red, etc) in the same page ?

Anyway, as I want them to use the same custom theme, my problem is resolved and I thank you very much for your precious help !
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61419
    
  67

It would be unusual to want differently themed widgets!

In any case, you can supply your own CSS to override the theme if you want.

You can also use the Theme Roller tool to customize your own theme.
francois dulmet
Greenhorn

Joined: Feb 08, 2011
Posts: 9
Yes, I used the theme roller.
It's true I can make my own CSS afterwards...

Thank you again !


Deep Gupta
Greenhorn

Joined: Mar 15, 2011
Posts: 1
Eric Pascarello wrote:Looks fine to me when I replace your links with the cdn links: http://jsbin.com/erule4/

Eric


Hi,

What if I wanted to do something similar, but have an accordion menu inside each tab?

Deep
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: jquery accordion and tabs on the same page