|
|
| Line 16: |
Line 16: |
| | .disp2 { display:"none" } | | .disp2 { display:"none" } |
| | </style> | | </style> |
| | + | |
| | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
| | + | <script> |
| | + | $(document).ready(function(){ |
| | + | $("button").click(function(){ |
| | + | $("p").toggle(); |
| | + | }); |
| | + | }); |
| | + | </script> |
| | </head> | | </head> |
| | + | |
| | + | |
| | | | |
| | <body> | | <body> |
| Line 30: |
Line 41: |
| | | | |
| | | | |
| | + | <button>Toggle</button> |
| | | | |
| − | <p align="center">The following two examples show two methods | + | <p>This is a paragraph with little content.</p> |
| − | to show and hide text dynamically.</p>
| + | <p>This is another small paragraph.</p> |
| | | | |
| − | <div align="center"><center>
| |
| − | <table border="1">
| |
| − | <tr>
| |
| − | <th>Changing Stylesheet</th>
| |
| − | <th>Changing inline style</th>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td valign="top">
| |
| − | <p onclick="HideMe1.className='visi2'"
| |
| − | onclick="HideMe1.className='visi1'">
| |
| − | Move the mouse over this text to make the following
| |
| − | text disappear.
| |
| − | </p>
| |
| − | <div id="HideMe1"> <p>DHTML using VISIBILITY</p> </div>
| |
| − | <p onclickr="HideMe2.className='disp2'"
| |
| − | onclick="HideMe2.className='disp1'">
| |
| − | Move the mouse over this text to make the following
| |
| − | text disappear.
| |
| − | </p> <div id="HideMe2"> <p>DHTML using DISPLAY</p> </div>
| |
| − | <p>When the DISPLAY text disappears, this text moves up.</p>
| |
| − | </td>
| |
| − |
| |
| − | <td valign="top">
| |
| − | <p onclick="HideMe3.style.visibility='hidden'"
| |
| − | onclick="HideMe3.style.visibility='visible'">
| |
| − | Move the mouse over this text to make the following
| |
| − | text disappear.
| |
| − | </p>
| |
| − | <div id="HideMe3"> <p>DHTML using VISIBILITY</p> </div>
| |
| − | <p onMouseOver="HideMe4.style.display='none'"
| |
| − | onMouseOut="HideMe4.style.display='block'">
| |
| − | Move the mouse over this text to make the following
| |
| − | text disappear.
| |
| − | </p>
| |
| − | <div id="HideMe4"> <p>DHTML using DISPLAY</p> </div>
| |
| − | <p>When the DISPLAY text disappears, this text moves up.</p>
| |
| − | </td>
| |
| − | </tr>
| |
| − | </table>
| |
| − | </center>
| |
| − | </div>
| |
| | </body> | | </body> |
| | </html> | | </html> |
This is a paragraph with little content.
This is another small paragraph.
