Hide Show DIV Content with Links by using Javascript

The Hide and Show DIV elements for HTML content is a great way to clean up your sidebar. It becomes especially handy for those long blogroll lists or anything that clutters up the blog. Just simply click a link to make all the hidden content magically appear and disappear.

Demo:

+/- Click Here to Expand and Collapse (demo is currently unavailable)

How to use it in Your Blog

Step 1: Adding CSS and Javascript
First, add this code below directly above the </head> tag.

<style type=”text/css”>
.commenthidden {display:none}
.commentshown {display:inline}
</style>
<script type=”text/Javascript”>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className==”commentshown”) { whichpost.className=”commenthidden”; } else { whichpost.className=”commentshown”; }
} </script>

Step 2: Adding the Active Content to be Displayed
Place this code wherever you would like it to appear. Make sure to change the red text to a name that is “unique” to any other name in your template. An example might be “blogroll-dropdown”. If you do not give each Hide Show DIV element a unique name the script cannot be used more than once on the same page. The green text is the title of the link that you click on to make the content appear. Replace the code “Expanded Content” with the content you wish to have expand and collapse.

<a aiotitle=”click to expand” href=”javascript:togglecomments(‘UniqueName‘)”
>Link Title</a><br />
<div class=”commenthidden” id=”UniqueName
>Expanded Content</div>

Step 3: Sample Code
Here is what my code looks like for the demo above:

<a aiotitle=”” href=”javascript:togglecomments(‘hideshowdemo‘)”>+/- Click Here to Expand and Collapse</a>
<div class=”commenthidden” id=”hideshowdemo“><ul><li><a href=”http://howhero.com/”>HowHero Tutorials</a></li><li><a href=”https://theblogwidgets.com/2008/09/translate-blog-widget-using-flags.html”>Blog Translation Plugin</a></li><li><a href=”https://theblogwidgets.com/2008/09/performancing-ads-make-money-blog-widget.html”>Make Money Widget</a></li></ul>
</div>

Like Us on Facebook?

Blogger Templates and WordPress Themes by ThemeForest


ThemeForest offers professional blog templates and themes at affordable prices. If you can’t afford to hire that expensive designer then ThemeForest is the right place for you. They offer wonderfully designed WordPress Themes and Blogger Templates which will help make your blog stand out from the rest of the crowd.

More about ThemeForest

ThemeForest has a growing collection of hundreds of nicely designed templates. The prices range from about $10 to $35. In most cases the wordpress themes are a little more expensive and nicer looking than the templates for blogger.

My Favorite Blogger Templates


Red and White
An awakening template featuring two nice sidebars.


Underland
This template should make you and your readers feel as if you were underground.


Buy Themes Template
This would work great for a design blog or even a photo blog.

My Favorite WP Themes


Business Professional Package
Excellent template which will give you blog the professional and clean look.


Convergence Community
Convergence is a nicely put together WordPress theme with the intent and focus on creating a community site.


BlueLight
Manage your portfolio and blog posts easily with this mash-up WordPress theme.

Check out ThemeForest!

Like Us on Facebook?

Create Round Image Corners Generator

Here is a great tool for giving all your pictures beautifully rounded corners. It’s simple to use and can save you a whole bunch of time. While most web designers use photoshop to achieve this very special effect, now it possible to accomplish in just a few seconds.

How to Use:

All you have to do is give the URL or upload your image below (in either JPG, PNG, GIF or BMP file type). RoundPic will do the work for you and let you choose which corners to round, the round size, the quality of the rounded image, background color for rounded corners, and even if you want it exported as a transparent PNG image.

Tips:
Be Patient… it may take a few seconds to process the image.

Image:
or URL:

Like Us on Facebook?

Image Reflection Generator

Here is a great tool for creating faded reflections for your images. You can upload an image from your computer or any image hosted on the internet. Either way, you’ll get an amazing looking picture. As you can see to your left, there should be a nice reflected image. It can give your web pages more depth, which is always a good thing. Also, you can decide how big you want the reflection to be. Here I gave about a 50% reflection size for the image on the left.
Start Reflecting Images

Like Us on Facebook?

Text Image Generator Widget | Logo Design

Google Logo Example

Take an image and create it into an image made out of text. This is a great tool for making some awesome looking logos and icons. If look above you will see google’s classic logo defined with the words ‘google‘ and ‘search‘. Although it is hard to see the words, you can always generate a bigger image. Also, keep in mind that this is not only for web-designers, but can also be used for pleasure.

  • In order to have the image for yourself, you will need to take a screenshot of the text/image you generated.
If you have any boggling questions, please leave a comment

Like Us on Facebook?

Create Image Hover Over Effect



Create your own attractive Simple Rollover Buttons and Images. This will enhance your webpage dramatically. As you can see above is a beautiful example. Now hover over the image and you will see a new image being displayed. The image above is in black and white. When you hover over, a copy of the image in color is then displayed.

+- Create your own Rollover Image

Copy and paste the code below. The code should be placed wherever you would like the images to appear on your site.


Steps for Customizing Images and Destination URL
  • Search for this line of code. You will find this line twice. Replace both of these lines with your own image.

https://theblogwidgets.com/wp-content/uploads/2008/05/CopyofRssspotlight.png

  • Next, search for this line below and replace it with another image.This image should be the image you see when hovering over.

http://facebeek.googlepages.com/Rssspotlight.png

  • Search for this line of code and replace it with your own destination url.

http://feeds.feedburner.com/widgetsforfree

  • Now search for this line of code below. You will find this line three times. Replace all three lines with your own unique name for the image. This is important if you create more than one of these cool rollover images.

nameyourimage

That’s all the steps necessary! If you have any questions please comment below. replace image on hover,

Like Us on Facebook?