This is Part 12 of the J Shortcodes Plugin Series and in this session we show how to create and style a jQuery Accordion using J Shortcodes. This creates a series of tabs that can be opened to reveal content in the accordion style. Then we show how to change accordion styles.
Well, let’s see. We have 11 lessons on J Shortcodes and if I can get my way down here, I would probably just go… the J Shortcodes Plugin. And so this is going to be the beginning of the 12th lesson. So on this site here, this is the laurraine.byobtutorial website and on it I have some content that we’re going to format using this J Shortcodes Plugin.
So I’m going to come over here to my posts and then I believe it is this one here. Let’s see, actually let’s look at Lady Apple. I think it’s Lady Apple really. So the way J Shortcodes… the way this plugin works is very similar to the way it works with all the rest of the things. We start off with a… it starts off with an opening shortcode and ends with an ending shortcode and then it has this little intermediate breaking shortcode to indicate a change. And so, we start off with this J Accordion, give it a size, give it a theme and determine which of the panels are active. And then we give it a title and then at the end of that section, we close it off and then at the end of the next section… then we give it another title and then close it off and then another title. And it ends up looking something like this.
Now, this page actually…so what I did here on this one is J Accordion size=normal which a normal size is a size that will fill up the available space. So size=normal and theme is Smoothness although I’m just going to take theme out entirely because Smoothness is the only…what is currently installed on the site. And active is 0 which means none of the panes will be active.
And so the next thing to do is to go our sections and I’m going to actually delete the h2 tags here at first. So we start off with our section title is Adverse Reactions Q & A and we have put the double colon there which is indicative that this is a title and on the right hand side of the title is the content. And we come all the way down here to the next section, let’s see, where is the next section? I don’t want to go streaming past it here.
Okay so here is the… we have that entered… this is the next section so here is our intermediate closing tag and now I’m going to just delete that h2 again. So we have our title with the double colon and we’ll come down here and find our next one. And here’s our next intermediate closing tag and then the next title and then here’s our last one, our last intermediate closing tag and our last title. And we get all the way down to the bottom… oh no, that wasn’t the end of it. We’ve got one more. So here’s the final closing tag or intermediate closing tag and we’ll get rid of these h tags. The h tag throws off the styling. We’ll bring in the h tags back here in another section.
And then we come down to the end and we have our final closing tag. So if we hit update now and view this post and scroll down, here we have… we have each of these things. If you click on this, it drops down to here and there’s all the content. Keep on scrolling down, click on this one, and the top one, fold it up and now you have the next one to read. Click on this one and again, these fold and click on that one. So you have all this content that’s easily accessed simply by clicking on these things.
Now that makes the whole accordion thing work and this is the Smoothness theme so it’s got the little gray background with the lighter color on the top and the darker color on the bottom and so on and so forth. And it comes… J Query or J shortcodes comes with 4 or 5 different styles.
Let’s see, so let’s look at the shortcodes here for a second. Okay, it comes with these… I guess, it’s 6 styles. So this is the Smoothness and then Blitzer, Cupertino, Overcast, Vader… oh I see. This is Vader also, just different colored buttons. So these are the 5 styles that it comes with. Now I’m going to show you how to do this without… and you know, and change the style. But first, I’m going to show you how to just pick one of these styles. So right now, we’re using Smoothness so instead of… this next time, we’re going to use Cupertino.
And the way this works… actually, I think first I’m going to show you the site in Firefox and if we go to Web Developer and edit our CSS, this style has been created by this stylesheet, J Query UI 1.89 custom CSS. And you can see, it’s a big, long stylesheet. Lots of information in it and all of that information is necessary in order to make this JQ smoothness thing work out. And so, there’s lots and lots of code associated with this JQ smoothness.
Now, what’s going to happen is… or because there’s so much code, what they do is they don’t load the code for all of their styles. They only load the code automatically for the one style because they don’t want you to have to load all this stuff and have all this stuff have to load when somebody comes to your site. So the thing to do then is back over here is we’re going to choose to display a different style and we’re going to do that… pardon me. We’re going to do that down here under J Shortcodes and then on our Settings section, we’re going to look at the J tabs J Accordion settings. And right now, Smoothness is the only one enabled. We’re going to go ahead and enable Cupertino and not enable Smoothness. So we’ll just enable Cupertino and then save the settings. Now, I don’t think it’s going to work yet because I don’t think… I think we have to tell it we’re using Cupertino. Yes, that’s right. So it’s telling us that the Smoothness theme has to be enabled so it’s not showing us what it looks like.
But what we’ll do is come back over here to our post and we’ll change the theme. So now what we’re going to do is we’re going to take theme Cupertino and we’re going to paste it in there and hit update. Refresh the post and now we have the Cupertino theme showing instead of the other theme, instead of the Smoothness theme.
Now on top of that, and the Cupertino theme obviously has a little background color to it too. It almost looks like a background image. Actually, I think it is this little image here and it fades off to the gray color. Something we can do is we can choose to have a pane open when we start. So if we come to active and say 2 for example, this is going to open up our 2nd pane when it starts. And so there it is, the 2nd pane is open. If we switch the next pane then that automatically closes but it will start with you know, one of the panes open if that’s the way you want.