WeberDev.com PHP and MySQL Code

LOG IN
BEGINNER GUIDES |  PHP CLASSES |  CODE SEARCH |  ARTICLES SEARCH |  PHP FORUMS |  PHP MANUAL |  PHP FUNCTIONS LIST |  WEB SITE TEMPLATES
Start typing to search for PHP and MySQL Code Snippets and Articles Search
Submit a code Example / Snippet Join us on FaceBook
Submit a code Example / Snippet Submit Your Code
Poker Tournaments Poker Tournaments
Poker Guide for Developers Poker Guide for Developers
Search Engine Optimization Monitor SEO Monitor
Web Site UpTime Monitor UpTime Monitor
Your Personal Examples List My Favorite Examples
Your Personal Articles List My Favorite Articles
Edit Account Info Update Your Profile
More Weber Sites
PHP Code Search
Web Development Forums
Learn MySQL Playing Trivia
PHPBB2 Templates
Web Development Resources
Web Development Content
Internet Security Software
Recommended Links
PHPClasses
PHP Editor
PHP Jobs
Vision.To Design
Ajax Tutorials
PHP Programming Help
PHP/MySQL Programming
Webmaster Resources
Webmaster Forum
XML meta language
website builder
Recommended
פרייסז - הכח לקנות עובר לידיים שלך
Texas Holdem Poker Evangelists

Go Back Add a Comment Send this example to a friend Add this Article to your personal favoritest for easy future access to your favorite Code Examples and Articles. Submit a code example Print this code example.
BACK ADD A COMMENT SEND TO A FRIEND ADD TO MY FAVORITES ADD CODE EXAMPLES PRINT
PHP Code Examples Submit your own code snippets Latest Code Examples RSS Feed
Title : Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides Click here to Update Your Picture
Rupali Gulande
Date : May 07th 2007
Grade : 3 of 5 (graded 11 times)
Viewed : 27631
File : 4628.zip
Images : Image 1 , Image 2
Search : More code by Rupali Gulande
Action : Grade This Code Example
Tools : My Examples List
Code

Submit your own code examples  Submit your own code examples 
 

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>



Related Code Examples
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
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
<FORM> causing an extra line in HTML output on IE
Categories : Beginner Guides, HTML, CSS
Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML
Bookmarklets are simple tools that extend the surf and search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General
Mordern Peroidic Table - Science
Categories : Java Script, HTML, Charts and Graphs
Newbie Notes #9 - Hyperlinking a post
Categories : PHP, Java Script, HTML and PHP, Beginner Guides
User Comments
 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? 		 
 Igor Bustiuc wrote :1911
try this:

function openFull(el){ 
        //**** Looks for the next sibling element skiping the blanks or lines etc ...
        var el_local = el;
        do el_local = el_local.nextSibling;
        while (el_local && el_local.nodeType != 1);
        //*********** end getting the Nextsibling
        
        if(el_local!=null)
        {
            if(el_local.style!=null)
            {
                
                if (el_local.style.display=='none')
                {
                    
                    el_local.style.display='block';
                }
                else
                {
                    el_local.style.display='none' ;
                    
                }
            }
            
        }
    } //end of function