Hi there,
Hope some coder can help me out. I have a onepage site build in Modx, when i click on a navigation button some content animates up (visible) and the other content needs to be hidden if its open.
I have it working on this fiddle for the two first buttons, here you can see what i want.
http://jsfiddle.net/fourroses666/8y7Sr/100/
Also have found some other script which has errors when I check jsHint.
http://jsfiddle.net/fourroses666/8y7Sr/104/
Can anyone help me how I can fix this so there is always just one contentfield showing?
It's really hard for me.
Evolution user, I like the back-end speed and simplicity
I think the simplest thing would be a hideAll() function that gets called in every case before you make the selection visible.
Sounds good but I dunno how. There are many ways to get to Rome, I just need to get to Rome and need a ride. Think I need to rent a car, stuck with this for a couple of days.
(
Evolution user, I like the back-end speed and simplicity
-
☆ A M B ☆
- 24,524 Posts
Use JQuery and toggle().
$(".toggleable").click(function(){
$(".toggleable").hide("fast");
$(this).toggle("fast");
});
Quote from: sottwell at Jan 23, 2013, 04:24 AMUse JQuery and toggle().
$(".toggleable").click(function(){
$(".toggleable").hide("fast");
$(this).toggle("fast");
});
When i test this script the buttons disappear.
So if I'm correct it would like some like this?
(It needs the animation going from bottom 0 to -600px.)
$("#activator-bureau").click(function(){
$("#box-bureau").animate({'bottom':'-600px'},800,function();
$(this).toggle("fast");
});
Where #activator-bureau is the button, and #box-bureau is the div which needs to be visible.
[ed. note: fourroses666 last edited this post 13 years, 8 months ago.]
Evolution user, I like the back-end speed and simplicity
-
☆ A M B ☆
- 24,524 Posts
Maybe what you really need to do is set up AJAX-based tabs.
http://jqueryui.com/tabs/#ajax
Yes, they look like tabs, but that's just the CSS. Style them however you like. The functionality is all done for you.
Thanks for the link, but I think I was very close with my first fiddle, (bit too much script)
I'm not looking for ajaxload.
Evolution user, I like the back-end speed and simplicity
-
☆ A M B ☆
- 24,524 Posts
Then non-AJAX tabs with different styling would do just fine. These work with one unordered list for the "menu" (of tabs or not, depending on how you style the whole thing), and then a set of related divs to show/hide for each menu item. The JQuery UI tabs (or any tab plugin for that matter) handles all the show/hide stuff for you.
-
☆ A M B ☆
- 894 Posts
@fourroses I modified your ID's and added an overlay class to your overlays so it's easier to accomplish what you want, here is the
jsfiddle check it out and let me know if you need further explanation.
Hope that helps.
Wow, thanks allot Benmarte !
You don't want to know how much headache I got from it.
I Need to inspect it when I'm at home, fiddle is a bit overloaded atm.
Evolution user, I like the back-end speed and simplicity
