ToDay The Question Is How To Change DIV Content, Data, Text On Mouse Click Using HTML, CSS, DOM Effect Without <script> Tag? And Can Also Customize Both DIVs With Estra CSS. Many Guy’s Are Asking About It To Make There Widgets, Sites And Blog Awesome By Adding Something Uniques Throught This Code. For This Purpose They Are Using JQuery But In The Eye Of SEO, It’s UseLess Because It’s Need Time To Load The WebPage.
So Here I Am Again With The New Code That Only Contain HTML, DOM, CSS Effect And Even No <script> Tag To Make The Code Light And The Load Time Also. It Is Quick To Load And Easy To Install. And You Can Also Customize It With Extra CSS According To Your Desire.
It’s Working Is Very Simple, The Whole DIV Content Will Be Changed After Click On EveryWhere Of The First DIV. When You Click On The First DIV, There Will Be Automatically A New DIV Came Up From Behimg That Will Hide First DIV And Show Itself Instead Of First DIV, From Here Your Visitor Can See Your Second DIV Data Easily. And The User Can Not Open Or Show The Firtst DIV Again Because It’s Completly Hidd From The Click.
So Without Any Delay, Just Proceed To The Code And Get It On Your Websitye/Blog To Make It Awesome But Before Proceeding To The Code, Have A Look On Features Too And The Live DEMO.
Table of Contents
Features:
1.) The Whole DIV Content Will Be Changed After Click On The First DIV.
2.) No <script> Tag To Make The Code Light.
3.) Only HTML, DOM, CSS Effect.
4.) Quick To Load And Easy To Install.
5.) You Can Also Customize It With Extra CSS.
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>
#exediv1 {
width:250px;
height:35px;
cursor:pointer;
position:absolute;
}
#exediv2 {
display:none;
position:absolute;
}
</style>
<div style="position:absolute;width:250px;height:35px;background-color:#000; color:#fff;">
<div id="exediv1" onmouseup="document.getElementById('exediv2').style.display='block', document.getElementById('exesdiv1').style.display='none' ">
Div 1 Content
</div>
<div id="exediv2">
DIV 2 Content
</div>
</div>
Customization:
1.) Change Div 1 Content And Div 1 Content With Your Own Data.
2.) You Can Also Change CSS In Bold Text Only.
3.) Save And Done.
Be the first to write a comment.