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

How to Begin Your Self-Love Journey This Year

When I originally had the idea for this piece of writing I’m about to share with you, I was in a place of transition. I didn’t know my place in the world, I didn’t know if I was worth it and I certainly didn’t feel like I could love myself. Here I am almost a year later, an example of how this works - if you choose to put it into practice. You can improve and learn to love yourself. You can take the steps that bring you into a better place.

I won’t say it was easy and I certainly won’t say I had overnight success, but when you learn to fight your battles one at a time, you’ll be able to look back and see how far you’ve come.

Are you ready to take the first step?



Self Love: Step one I have always been a timid person. I’ve always had trouble keeping the standards I have for myself something below what I deem “perfect”. I enjoy discipline and when I don’t know what to do or my world is shaken, I’m hard on myself.

That’s just who I am.

With that said, I've always felt like I was not a…

A Love Letter

To my dear, blooming Rose - Attached to this letter is not only my love, but my gratitude, thankfulness and a small box of decadent dark chocolates. I would've had flowers delivered too, but no measly plant could ever compare or express my feelings toward you.

Ahh, my dear. You are my truest bundle of joy. It does not matter what mood you are in - you light up my day in the most wonderful of ways.

Your smile makes the sun jealous. Your embrace makes me feel full. Your laughter - so thick and loud - makes me want to laugh too.

What I love most is when you are truly and purely being yourself - because that's who you're meant to be.

With much love and kisses blown with a wink,
Your Secret Admirer

PS: Maybe we could share those chocolates later, eh?


+ + +
When you need some uplifting, write yourself a love letter. Be silly and positive. Analyze yourself. Amp up your best qualities. De-sock your feet as you write and wiggle your toes as your write (then put your socks back on b…

How to Manage Your Creative Time

Being productive can be hard, especially when you have too many things on your to-do list, and have no idea where to start. As a human who likes to pack a lot of stuff into their day, I've struggled with managing my blogging time and balancing it with everything else I need to do.

Here are some tips to help you manage your time (whether it be for blogging or anything else). :)


Being productive can be hard, especially when you have too many things balanced on your plate. Most of the time, you don’t know where to start. As a human who likes to pack a lot of productivity into their day, I’ve struggled with managing my time - creatively and in the other areas of my life. The balancing act is hard, so I’ve compiled some of the tips that work best for me.


PS: There’s a link to a print out of the exercises that correspond with these tips at the bottom of this!

Figure out what needs to be done Before you can manage your time, you need to figure out what it is you want to get done. Do you w…