Tutorial: Accordion Button

Hello there. :) As requested, today I am going to help all you lovely bloggers out with making an accordion button.

An accordion button is when you have a series of titles or links and when you click one, it opens to reveal hidden content. o.o If you need a better example, just check out the bottom of my sidebar, and click on "Copyright", "Search", or "Sponsors". :)

Now to make this lovely little gadget, you'll need to:

1. Log into your blogger account.

2. Select the blog you'd like to add this button to.

3. Go to your blog's Layout, and click "Add a Gadget".

4. Select the "HTML/JavaScript" gadget, and paste the following code into it:

<center><style type="text/css">

#wrapper {
width: 250px;
margin-left: 50;
margin-right: 50;
border-top: 0;
border-bottom: 0;
padding: 5px;
background: #bbb;
}

.accordionButton {
width: 250px;
float: none;
cursor: pointer;
color: #000000;
text-align:center;
padding:0px;
margin-bottom:2px;
padding: 5px;
}

.accordionContent {
width: 250px;
float: none;
display: none;
background: #fff;
color: #000;
padding: 5px;
}

</style>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="http://hrpblogdesigns.webs.com/Accordion%20Menu/javascript.js"> </script>
<div id="wrapper">
<a href=BLOG LINK><div class="accordionButton">Home</div></a>
<div class="accordionButton">About</div>
<div class="accordionContent"><p align="center">Put a little bio or something here. Just tell us about yourself. Customize to your pleasure.</p></div>
<div class="accordionButton">Contact</div>
<div class="accordionContent">Contact information or links can go here. :)</div>
</div></!doctype></center>

5. Save and view.

Tada! :) Now if you'd like to customize it:

#wrapper - Changing the CSS in here will change the overall accordion button.

.accordionButton - Changing this CSS will customize the title as well as the outer appearances of the buttons.

.accordionContent - Changing this CSS will control how the innards of the button will look. If you want your bio and contact information to have a red background when opened, you change "#fff" to "red".

BLOG LINK - This is just a simple home link. When someone clicks this, they'll be redirected to the home of your blog.

Button Titles - The text in the light blue tint are the titles of the button. Change these to change the titles.

Content - The text in the magenta is the content of the buttons. When the title is clicked, the button will open up to reveal these words.

I hope I didn't just confuse you further. If you need help, or have any questions, just ask me down below, in the comments. :)

Have a blessed day, and thank you for reading. <3

So this is where I'm at.

Hi friend. How are you? I hope this post meets you well. Today I wanted to write about this little space. My corner of the Internet. After many attempts to give it a major face lift / rebrand / vibe / mission I figured out that the girl I was in 2012 when I originally started this blog is no longer who I am. So let's start fresh. Hi, I'm Rosie. I am a college student and a creator of many crafts. I enjoy writing Young Adult fiction, playing piano, singing at the top of my lungs, and, above all, making other people laugh. Right now I am pursuing a degree in art therapy, which means my future job will be helping people express themselves in a safe environment with someone who loves them. I have tried to be many things on the Internet, from an American Girl doll hoarder to a make-up artist, but nothing has really clicked with me. Not until now. I have always been a Christian. My entire life I have identified as being a follower of Jesus Christ. But the thing ab...

Room Tour 2019

I've always wanted to do one of these posts. If not for the enjoyment of others, for the enjoyment of my future self to look back on and realize how much my style and space have changed. My door. I think I'm sooo artsy for taping paint swatches to my door. And I actually love how it looks too. I was going for "Starry Night" with my own little twist -- and without the actual paint. ;) This is what my room looks like from the doorway. Can you guess what the theme is? It's funny -- a few weeks ago I was discussing with Kenzie how my room has this coral and aquamarine vibe to it, yet my Instagram theme is focused on yellows and blues, and my actual fashion style is very grungy/hispter/artsy. So it all comes full circle, I guess? Still, I love my room. It's my safe haven. Now come on in so I can give you the full tour... Right as you walk in, you will see my DIY jewelry hanging on the wall to your right. It's quite a balancing act when I ...

The 2 Key Elements of Super Productivity

Throughout the entire Fall semester, this burning question continuously popped into mind: How do people do it all? In high school, I listened to upperclassmen semi-ranting and semi-bragging about how busy they were. The piles of homework, how late they stayed up, how long of a shift they worked over the weekend... Nowadays, I look at the freshman in college and witness them doing the same. Always working, always engaging--and in some cases feeding a child. I've observed my friends partake in extracurriculars, brag about binge-watching Netflix, and skip over the fact that they're also working part-time while they're in school full-time. I've always been one for productivity, and yet... It baffles me. I yearn to know how they do it. How they get so much done per day with less sleep and more obligations. My only true responsibility was school. When I told others -- mainly college graduates -- I was taking 14 credit hours, they would always reply with, "Oh my ...

Self Known

Search This Blog