One of my lovely fellow blogger Sharmilee - face behind Sharmi's passion has written this lovely post for me..Thank you Sharmilee .. You are a star. Though I have implemented this in my space , I wasnt sure how to go about writtingstep it .
Our basic motto is to help - IT and non IT bloggers to beautify their spaces and implement this lovely functionality with ease... This functionality will help reducing clustered bullets under one header.
I would say we can use this functionality in the following places :
- Recipe Index - Pls check Sharmi's Recipe Index or Recipe Junction
- Search based on ingredients - Many blogs have implemented this.
Over to Sharmilee to the rest of the post !
About Me & Behind Sharmis Passions:
I love working with colors especially on the web and thats why I attempt to keep my blog as well pics colorful.
I cant say I am very passionate about cooking the regular menu........a innovative recipe hunter I should admit. Just have entered the world of baking and am just loving it.Greatly interested in food photography and Sharmis Passions is a platform for all my learnings.
Why another food blog:
It is one place for recipes for healthy low fat food, baked goodies, occasional festive cooking, tips on food photography, gadgets etc.
Please check the complete implementation of Hide/Show(Expand/Collapse) at my space in recipe index to get an idea of the functionality: http://www.sharmispassions.com/2010/09/recipe-index.html
The hide/show function can be categorized into 3 parts:
- Html Header coding
- Hide/Show Html Content
No no its not that difficult as it sounds here goes the implementation in easy steps
STEP 1 : Html Header coding:
This the header which we click to show/hide and here it is ‘Bakes’
The highlighted value in green has to be the same in ul id too(need not be ‘bakes’ it can be as per ur requirement) which is also highlighted in green below which shows the relationship between the header and hide/show content.
This is the out put which will look in browser:
STEP 2 : Hide/Show Html Content
Here goes the content which is going to be hidden/shown
Here I need 2 items to be shown when I click on the header ‘Bakes’ so have given 2, you can add it as per your requirement.
This is how it looks in the browser when clicked on the header Bakes:
STEP 4 : Now for the full coding to be implemented in one go:
Other attributes description:
style="TEXT-DECORATION: none" – By default the links will be underlined, if we want to remove it this attribute is used
onmouseover="this.style.textDecoration = 'underline';" – This is to show a difference when we mouseover on the headers
onmouseout="this.style.textDecoration = 'none';" - This is to remove the underline when we mouseout on the link
href =”www.sharmispassions.com” – This is to redirect to the page when we click on the link
target=”_blank” - To open the link in a new page
Implementation in Blogger:
If you want the same code as a seperate post then paste the code in New Post > Edit Html and publish it.
- For implementing Recipe Index in a page , Go to Postings > Edit Page > New Page .
Give a name for your new page , say Recipe Index and get started with your content.Remember to remove <html > ,<head> & their closing tags when you do it in your page.