Skip to main content

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

Comments

  1. Awesome Rosie! Thanks for sharing, I've been wondering how to do this for a while. :) By the way, how did you learn HTML/CSS? I'm working on learning them (does that make sense? :) ) and was wondering if you have any advice. :)

    xx

    ReplyDelete
  2. Awesome! Thanks for doing this tutorial!- Jollygirl from http://reflectionsofajollygirl.blogspot.com/

    ReplyDelete
  3. Wow, this helps a lot! Hopefully my Web Design class will help with things like this. Also, I nominated you for the Sunshine Award - questions are on my blog: http://endlessvariations.blogspot.com/

    ReplyDelete
  4. Emily17.7.14

    Rosie I can't copy the text...

    ReplyDelete
  5. Thank you SO much for this, so helpful! xx

    ReplyDelete

Post a Comment

All comments I receive are cherished for many hours after reading them. Thank you for taking the time to type something to me.

xx Nicole Rose

Popular posts from this blog

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

How and Why: Linkup Parties

Starting out as a blogger can be really hard. You want to grow your blog, but even though it seems like you've tried everything, nothing works. Your blog hasn't expanded in the least. You don't see any improvement. That's why in this post I'm going to share with you the miracle of link up parties! I'm going to go over how they work, why you should create your own, which hosts you should use and much, much more. Let's get started, shall we? :) Share this post to help other bloggers learn about linkup parties. How they work The typical link party can be broken down into 3  basic*  parts. * Every link up is different, so as you're reading through this and considering to create your own, consider adding a unique twist to your link up party. After all, people tend to get tired of seeing the same old same old. The sponsors These are the people who came up with the original idea of that particular link party. It can be anyone from you on your

Expression // 005

Friends Make up new words together. Hug attack each other so hard that it hurts. Throw glitter at your face. Tell you stories off the top of their head. Comfort you when no one else can. Beat up whoever makes you cry. Make you laugh till your insides hurt. Obsess over celebrities and books with you. Help you get through the rough days. They complete each other. xx Nicole Rose