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. Hiya, I see that you are following me on bloglovin'!! Due to problems please may you follow me on this bloglovin' link instead as this is the proper one which is connected to my blog:

    http://www.bloglovin.com/blog/12552811

    Thank you, sorry for the inconvenience xx

    ReplyDelete
  6. 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

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 about growing up in t…

Good-bye.

Have you ever had that one thing you've tried to make work but never could? This could be anything in your personal life, from piano notes to paragraphs in a blog post.

Well, I've been trying and trying and trying and trying for years now to get blogging to work for me. At one point in my life, this was my passion. I lived for your comments, your friendship, and the purity of sharing whatever was in my heart with the world. But I don't feel warmth or connection anymore. In fact, I feel rather lost. Like I'm shouting into an abyss, vying for attention and something to fill my inner void. This feeling comes more often than I care to admit, and I've pushed through all this time with the thought that it will get better. That all I have to do is keep trying and it will work out.

But it hasn't. And I'm out of ideas.

This isn't to say I won't be back. That I won't hit a creative stride in the next week and decide to share something epic with you. But f…

Angel by the Wings (Piano Cover)

Many months ago I fell in love with this song. And like anyone who has fallen in love, it's stuck with me -- to the point where I can now play it with my eyes closed.
I think I love it so much because the lyrics go like:
"You can, you can do anything, anything
You can do anything"
Over and over. In these past few months, I've needed those power phrases on repeat.



Thank you, dear music, for being the inspirational piece to get me back into taking piano lessons. Thank you for inspiring me to learn other pieces (and yet always return to you).
It scares me to share this with you because it is imperfect, our piano needs tuned, it's not visually stimulating, or even a good quality soundtrack. But I think I would be doing myself an injustice if I didn't.
Besides, everyone has to start somewhere.
Enjoy.