|
|
|
|
|
|
| |
This is a simple example to show or hide your content by just clicking on a title.
We define a function openFull() and use a conditional opretor to control the class.
A very usefull script for beginner.
see code for details
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Content Viewer</title>
<style type="text/css">
body {font-size:14px;line-height:18px;}
h2 {cursor:pointer;font-size:16px;font-family:Trebuchet MS;margin-left:10px;line-height:10px;}
h3 {cursor:pointer;font-weight:normal;font-family:Trebuchet MS;color:gray;text-decoration:underline;line-height:10px;}
h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px;}
.op {cursor:pointer;}
div.block {margin-left:30px;}
.exmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px;}
li {margin-top:2px;font-family:Trebuchet MS;}
</style>
</head>
<body>
<script type="text/javascript">
function openFull(el){
el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
}
</script>
<h2 onclick="openFull(this)">JavaScript Content Viewer</h2>
<div class="block">
<!--- --->
<h3 onclick="openFull(this)">Supported browsers</h3>
<div style="display:block" class="block">
<ul>
<li>IE 5.x and above</li>
<li>Mac OS X Safari</li>
<li>Mozilla 1.4 and above</li>
<li>FireFox 0.9 and above</li>
<li>Opera (Xml loading depends on browser version)</li>
</ul>
</div>
</div>
<div class="exmp">This is static text...</div>
</body>
</html> | |
|
|
| Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | CSS Buttons Styles
Categories : CSS, HTML, Beginner Guides | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | <FORM> causing an extra line in HTML output on IE
Categories : Beginner Guides, HTML, CSS | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | | | Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | PHP Calendar
Categories : PHP, Calendar, Date Time, Java Script, CSS | | | How to make a scrolling Div
Categories : HTML, CSS | | | CSS Container BOX , with cool CSS Design
Categories : CSS, HTML, Web Design | |
| | | | Steven Bitaxi wrote :1841
This code gives me an "undefined" error in Firefox, and only seems to work in MSIE.
el.nextSibling.style is undefined.
How can I make this compatible with Firefox?
| |
|
|
