jQuery Accordion/Toggle Panel - Only close/open specific classes - javascript

Community!
I really need your help now. I wanted to make an accordion in which I can open all Tabs. By searching the Web I found a good solution:
http://jsbin.com/eqape/968/edit
The first Div-Container of each Section is the one who closes/opens up. I want to define 3 div-Containers. One at the top (always displayed), one in the center (with the toggle-functionality) and one on the bottom (always displayed). Is this possible ? And how can I do this ? I'm new to jQuery so this drives me crazy.
Thank you, guys!

I think you're trying too hard. If I understand correctly, you simply want any .top to toggle the adjacent .content. Since I'm more familiar working in JSFiddle, I've set the code up there:
http://jsfiddle.net/SuyS2/1/
$('.top').click(function () {
$(this).next('.content').slideToggle();
});
Let me know if I'm missing something.
UPDATE:
If you had wanted the sections and the inner content to toggle, you could do this:
http://jsfiddle.net/SuyS2/5/
$('.section-heading').click(function () {
$(this).next('.section-wrapper').slideToggle();
});
$('.top').click(function () {
$(this).next('.content').slideToggle();
});

Related

Animate the scroll between sections on a single page? (javascript only)

I've found a few posts on here similar to what I'm asking, but they all involve jQuery (I'm looking for a solution that's purely javascript, as simple as possible).
I have a page with a fixed nav on the left, where the different links bring you up or down to different sections on the page. It works fine, but I was trying to find a way to animate the scroll. I managed to come up with some javascript that tells me the offset between the sections:
function scroll(e) {
dest = e.target.getAttribute('href');
(for example, this would give me the result of #aboutCon)
destination = dest.replace("#", "");
(this changed it to aboutCon which is already defined as a variable containing the "About" section)
var destOffset = window[destination].offsetTop;
window.scrollTo(0, destOffset);
}
but I have no idea how to take that information and animate it. I've found a few javascript solutions but they're so complicated, whenever I try applying them to my own code, they don't work. I'm hoping there's a simple way to achieve this?
I'm a student and still learning so if you have an answer, an accompanying explanation would be greatly appreciated! Thank you!
document.getElementById("elementID").scrollIntoView();
Or cleaning it up a bit...
function scrollIntoView(eleID) {
var e = document.getElementById(eleID);
if (!!e && e.scrollIntoView) {
e.scrollIntoView();
}
}
Of course replace "elementID" with the ID of the div or element you want to scroll to.
This one is the simplest solution I've found with pure JS.

Accordion slider, not displaying content properly

I have this multi-tiered accordion slider for listing schedules. The problem I am having is once you navigate to the third tier, the entire list disappears and has some weird space at the top. If you follow this link -- Pool League Demo
You can see what I mean once you navigate to the schedules tab. Once there, if you click monday 9 ball > Week 1 , you will see exactly what I mean. Any help is very much appreciated :)
Also, on a side note, I am using scrollIt.js and for some reason am having problems with the active class. When applied, it doesn't do what it is supposed to, and this happens multiple times throughout the page, even in the schedules section which doesn't use scrollit.js. If anyone knows how to get the active class to work, I would really appreciate the help on that as well.
Thanks in advance!!
For your second answer, please try adding the activeClass: 'active' parameter to the $.scrollIt() function call.
e.g. :
$.scrollIt({
activeClass:'active'
});
and make sure the class name you mention has some CSS attached to it.
e.g. :
a.active {
background: #000;
color: fff;
}

How to replace one js function for another on columns

Change of plans, can someone please advice me on adding a function with hidden divs for each column that blends one to another when a user presses the button?
I used a function but at the end it only caused more gaps and more complications making the page and its other elements a mess, then I found another function in a jsfiddle that
would be great to use instead and it seems to be much simpler.
Can someone please help me replace the current function for the other function for the columns?
**This function would be ideal to replace the current function, giving the slide
effect with hidden column extra divs (a,b,c) all on one column
(marked as Column1) for example**
**Instead of the current function that expands the column by pressing "more",
replace it by having all on one column just like a picture
slideshow ----> the column has (divbox) slides with different content on it**
Ideal function for each column
JSFiddle
Current Function with the 4 columns
JSFiddle
**Please I beg you I really need help, I would deeply appreciate it.Please, I know there are talented people here who can do this in a minute, I wish I knew this but no matter how I try and trust me I really tried , can't learn it, it doesn't go through :(
Please
Angie, I hope this is what you are looking for.
Modified jsfiddle
function slideonlyone(thechosenone) {
$('div[name|=box]').each(function (index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(200);
} else {
$(this).slideUp(600);
}
});
}
Just basically placed your articles in the slides. You will have to adjust the img urls and work on CSS styling.
Hope that works out for you.

hide and show div tags

I'm trying to implement a switch/tracker to my HTML5 game.A short description of what I want jQuery to do for me: hide all div tags and show the ones I need (body, output, language, footer and a specific level f.i. Level 1 Once this has been shown, it needs to show the next level f.i. Level 2 on clicking a bottom.
But I don't know how to code this. So can anyone please help me?
So far I have written this:
jQuery('document').ready(function() {
function hideshow() {
$("div").hide(99999999);
$("#container").show(9999999);
$(".output").show(9999999);
$("#languages").show(9999999);
$("footer").show(999999);
$("#L1").show(999999);
};
});
It might be better practice to hide the div's with css, or even replacing the Level 1 with Level 2 content (ajax based for example).
If you cannot do that, give all level div's a class, and only hide those with
$('.level').hide(); $('#level1').show();
The way to make a function show something is to do
$('#level2').show();
Use the jQuery css method:
$("div").css("display", "none"); //for hiding
$("div").css("display", "block"); //for displaying

jQuery function show divs with display: none

I have some jQuery code, which attempts to show the first 6 divs on page load and hide all of the others. It is littered with errors, but ideally I am trying to create a function that shows the next six divs on an event, ultimately when the user scrolls to the bottom. I know my code is not great, but I have done my best to make it as easy to follow as possible.
The code is here, and any help would be much appreciated! Thanks in advance
I think this is what you wanted:
http://jsfiddle.net/gRzPF/8/
If I understand correctly every time you get to the bottom of the window you want to show the next 6 divs. My edit achieves that.
You just needed to use semi-colons in your for statement, wrap a function around it and move your constraintNumber variable inside that function.
replace
for (i = contentNumber, i < constraintNumber, i++;) {
by
for (i = contentNumber; i < constraintNumber; i++) {
in javascript (and C), ; must separate the 3 elements of a for statement
in jsfiddle, you have 'JSLint' button to verify code error !! Use it !
Here http://jsfiddle.net/gRzPF/7/ I modified your code, now it seems to work :)

Categories