This week's book giveaway is in the Cloud/Virtualizaton forum.
We're giving away four copies of Mesos in Action and have Roger Ignazio on-line!
See this thread for details.
Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

jquery accordion and tabs on the same page

 
francois dulmet
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
francois dulmet
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ok, here is the code appearing hopefully better :
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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



 
francois dulmet
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Looks fine to me when I replace your links with the cdn links: http://jsbin.com/erule4/

Eric
 
francois dulmet
Greenhorn
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64833
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, I used the theme roller.
It's true I can make my own CSS afterwards...

Thank you again !


 
Deep Gupta
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic