jquery accordion and tabs on the same page
posted 14 years ago
-
-
Number of slices to send:Optional 'thank-you' note:
-
-
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
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
posted 14 years ago 
-
1 -
- Number of slices to send:Optional 'thank-you' note:
-
-
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
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
Ok, here is the code appearing hopefully better :
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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.
By the way, indenting your code would make it a lot easier to read as well.
francois dulmet
Greenhorn
Posts: 9
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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.
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.
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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.
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.
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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
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
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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)
(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)
posted 14 years ago
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()?
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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()?
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
francois dulmet
Greenhorn
Posts: 9
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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 ?
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 ?
posted 14 years ago
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.
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.
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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...
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...
posted 14 years ago
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.
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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 !
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 !
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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.
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
posted 14 years ago
-
- Number of slices to send:Optional 'thank-you' note:
-
-
Yes, I used the theme roller.
It's true I can make my own CSS afterwards...
Thank you again !
It's true I can make my own CSS afterwards...
Thank you again !
posted 14 years ago
Hi,
What if I wanted to do something similar, but have an accordion menu inside each tab?
Deep
-
- Number of slices to send:Optional 'thank-you' note:
-
-
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
| Don't MAKE me come back there with this tiny ad: The new gardening playing cards kickstarter is now live! https://www.kickstarter.com/projects/paulwheaton/garden-cards |
