I am on the Executives page of our Web site.
This is under the About section and right now this page is just a list of
people and biographies.
It's just one after the other.
We can probably improve the look of this page by adding some photos of these people,
but this is a young company and they haven't had the time to go out and
take the photography that's required to put all these people up here.
So what I am looking for is a way that I can add a little bit more interactivity
and a little bit more fun to this page.
One possible way of doing this is using Accordion Panels and you see Accordion
Panels in a few places inside Joomla!
One of them is for example where we add if we go to our Main Menu and we try
to add a New menu item and we hit our Select button, these little items here
where we click on the titles and then something drops down, these are Accordion Panels.
What I could imagine would be a page that looks like this that has the names of
all of the people who are the employees that are executives and when you click
on their name, you get a biography for them that appears.
That would be a little bit more interactive.
So perhaps we can go ahead and add something like that to the Web site.
That is in fact possible and I am going to show you how to go ahead and do that now.
If you go to Content and you go your Article Manager, scroll on down and find
that Executives article, and when you go into the Executives article,
what you'll see is we formatted this so that we had some H2s that were the names of
the people and then of course we have a paragraph of information here.
So what I'd like to do now is I'd like to set these up with internal page breaks
and this is the Page Break button here.
So what breaking this up into page breaks will do is it will put little bits of
information originally on individual pages and then Joomla!
actually has a plug-in built-in that can display those individual pages as a
full accordion, as opposed to a series of individual pages you actually have to flip through.
So what I am going to do is, right before Simon I'm actually going to put in a
page break right off the bat, and it's going to ask me for information
a Page Title and a Table of Contents Alias.
The easiest way to do this is just to copy his name.
So Ctrl+C or Cmd+C to copy his name and then right before his name
I'll click that Page Break button and I am just going to paste that information in
twice and say Insert Page Break.
Then I am going to go my next person, copy her information, click right before
her name, click the Page Break button, and paste that information in twice.
I am just going to do that here for the last two people as well.
Copy that, click the Page Break, paste in, Insert Page Break.
Then finally, for this last one, copy, click before, click Page Break,
and Insert Page Break.
Now, that's all I have done so far.
If I just go ahead and say Save, just to save what changes I've made and
I refreshed the Executives page.
What will happen is I've actually got this set up with this sub-navigation set
up over here on the side and I can click on the names of any of these
executives and you see that they're sort of presented in their own page
and tells you it's page 2 of 5.
I can click on through the list here or I can click on all pages and show
everyone together on one page.
You might be wondering why on the top level Executives page I have no content.
That's because I put my page break before the content even began.
So if you are going to use this kind of layout, you might want to have some
introductory text over here on the side that would say something along the lines
of our executives are amazing, click on the navigation on the right in order to
explore all of our fabulous people.
But we are not going to stay with this particular layout.
This is just Joomla's! default layout for an article that has page breaks in, a multipage article.
We can make changes to this.
I am going to go ahead and hit Save & Close and I am going to now go to
Extensions>Plug-in Manager and here inside of the Plug-in Manager I am going to
look for the plug-in called Content-Pagebreak.
I am going to click on that to edit it.
So this is the plug-in that drives the ability to break a single article into
several pages, the way you just saw.
Under the Basic Options, the Presentation style is what I'm most interested in.
Right now that's set to Pages.
If I change that to Sliders, sliders are Joomla's! word
for Accordion Panels and if I say Save and I refresh this page,
I now have my Accordion Panels.
So I can click on Sally's name and get her information, click on June's name,
click on Jason's name, and get all of these bios, which is great.
That's a wonderful way of laying out this page.
It's definitely looks a little bit better than what we had before.
And if you're a CSS wiz, you could certainly add a little bit more styling to these,
maybe some bars that go across the page or something that might look
a little bit more clickable or little bit more accordion like.
What I do want to do right now know though is I'd like to get rid of these
big bold words, because I've already got their name here and now I've got it again here.
What's happening is the big black words here are the H2s that are inside of the
article and the blue clickable words, these are where we entered each of those
page breaks, we put in two pieces of information, and that's where that
information is coming from on the page.
You'll notice also here inside of his Page Break plug-in down here under
Presentation Style you also have the option of Tabs or Pages.
Pages are what Joomla! uses by default, so you saw that one.
Tabs would arrange this as a series of tabs going across the page.
You can click on the tabs to flip between the types of content.
But the styling really works if somebody has configured styling for tabs and
this particular template is not styled for tabs.
So I am not going to show you this, but you can take a look if you like on your own.
I am going to go ahead and close this and I am going to go back to my Content,
back to my Article Manager, and I am going to go to my Executives page again.
Now I am going to edit this to get rid of the names of the executives' right here,
those H2s that we originally created.
Just like that I am just going to remove those h2s from the text.
Remove that one and then one more and then I am going to Save & Close my article
and now when I go back to my Executives page and I refresh, you'll see that by
default I've got Simon Lodine, the very first one, and he's open by default.
I can click on the names of these other people and their bios will jump up here,
just like that and I can flip between them very nicely.
It's a little bit more interactive.
It makes the page feel a little bit shorter.
It doesn't like quite such a laundry list of stuff and I think this is
a great way of presenting this content.