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 :
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:
Sharmis Passions - a little space for my passion for cooking and clicking!
It is one place for recipes for healthy low fat food, baked goodies, occasional festive cooking, tips on food photography, gadgets etc.
HIDE/SHOW FUNCTIONALITY
The hide/show function can be categorized into 3 parts:
- Html Header coding
- Hide/Show Html Content
- Javascript function
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’
<div>
<a onclick="javascript:toggleIt('bakes')" href="javascript:void(0)">[+/-]Bakes</a>
</div><br clear="all"/>
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.
<ul style="DISPLAY: none" id="bakes">
This is how it looks in the browser when clicked on the header Bakes:
STEP 3: Javascript function
This is the main element of the functionality.
<head>
<script type="text/javascript" language="javascript">
function toggleIt(id) {
element = document.getElementById(id);
if (element.style.display == 'none') {
element.style.display = '';
} else {
element.style.display = 'none';
}
}
</script>
</head>STEP 4 : Now for the full coding to be implemented in one go:
<html>
<head>
<script type="text/javascript" language="javascript">
function toggleIt(id) {
element = document.getElementById(id);
if (element.style.display == 'none') {
element.style.display = '';
} else {
element.style.display = 'none';
}
}
</script>
</head>
<div>
<a onclick="javascript:toggleIt('bakes')" href="javascript:void(0)">[+/-]Bakes</a>
</div><br clear="all"/>
<ul style="DISPLAY: none" id="bakes">
<li><a style="TEXT-DECORATION: none" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" href=" http://www.sharmispassions.com/2010/03/simple-moist-chocolate-cakewith-no-eggs.html" target="_blank">Moist Chocolate Cake</a></li>
<li><a style="TEXT-DECORATION: none" onmouseover="this.style.textDecoration = 'underline';" onmouseout="this.style.textDecoration = 'none';" href="http://www.sharmispassions.com/2010/12/eggless-vanilla-chocolate-chips.html" target="_blank">Vanilla Chocochips Cupcakes</a></li>
</ul>
</html>
Other attributes description:
href="javascript:void(0)" – To prevent the page from reloading when we click on the link, we should use "javaScript:void(0);" within the anchor tag.
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
target=”_blank” - To open the link in a new page
Implementation in Blogger:
- Go in Design > Page Elements > Click on Add a Gadget > Select HTML/Javascript .And paste the code there then save it.
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.
