Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Tuesday, December 18, 2012

Stylish Open DIV On Click Widget For Blog And Website

This Article Was Live On: Tuesday, December 18, 2012 And Till Now Have2 comments.
Stylish Open DIV On Click Widget For Blog And Website

Here’s a simple tutorial on How To Open A DIV On Click. This is very simple code but here I am going to make it more awesome via including a JQuery plugin to make it's opening more awesome. Many people want this widget so that they can save there space on website or blog to show there widget on user demand because many visitor did not want everything so if some one needs any thing they just read the title and open if he desire. So without any more preface here we proceed to that widget code but before you have to view the awesome features of this widget and the demo screen shoot below.

Features:

1.) This DIV Will Open On Mouse Click Over There Title And Close On Again Click On There Title.
2.) You Can Add More CSS To Make You DIV Stylish And Awesome.
3.) You Can Add Unlimited DIV.
4.) You Can Open All DIV At Same Time And Also Close All At Same Time.
5.) Easy To Install And Quick To Load.
6.) You Can Add  Text, HTML Code, JavaScript Code, Video, Pic And Anything .
7.) This Contain JQuery That Make It More Awesome When It Slides When Opening.
8.) Supported Browsers (IE+9, Chrome And FireFox, Safari And Opera)

Stylish Open DIV On Click Widget For Blog And Website 

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.


How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style>
#exediv, #exediv_2{height:300px;background-color: #efefef;padding:20px;display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
$.fn.showHide = function (options) {
var defaults = {
speed: 1000,
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
var toggleClick = $(this);
var toggleDiv = $(this).attr('rel');
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.show_hide').showHide({
speed: 1000,
});
});
</script>
<a href="#" class="show_hide" rel="#exediv">Division 1</a><br />
<div id="exediv">
Fill This Space With Your First DIV Content Like Text, HTML Code, JavaScript Code, Video, Pic And Anything You Want To Show Here.
</div>
<a href="#" class="show_hide" rel="#exediv_2">Division 2</a><br />
<div id="exediv_2">
Fill This Space With Your Second DIV Content Like Text, HTML Code, JavaScript Code, Video, Pic And Anything You Want To Show Here.
</div>



Customization:

1.) Change The Orange Text With Your DIV CSS.
2.) Change The Purple Value To Same To Change The Timing Of  DIV Opening.
3.) Change The Red Text With Your DIV Titles.
4.) Change The Blue Text Your DIV Content Like Text, HTML Code, JavaScript Code, Video, Pic And Anything You Want To Show Here.
5.) If You Want To Add More DIV, Please Feel Free To Ask.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



2 comments :

  1. Thank you for sharing your nice ideas. it will really helpful to me for improvement my blogs.

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us And Hope For Better...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.