API tools faq
paste
Guest User

Untitled

a guest
Jun 1st, 2013
771
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.23 KB | None | 0 0
raw download clone embed print report
  1. <tr>
  2.     <td colspan="4" style="text-align:right;"><html>
  3.  <head>
  4.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
  5.     <script>
  6.         $(document).ready(function() {
  7.           $('.nav-toggle').click(function(){
  8.             //get collapse content selector
  9.             var collapse_content_selector = $(this).attr('href');                  
  10.  
  11.             //make the collapse content to be shown or hide
  12.             var toggle_switch = $(this);
  13.             $(collapse_content_selector).toggle(function(){
  14.               if($(this).css('display')=='none'){
  15.                                 //change the button label to be 'Show'
  16.                 toggle_switch.html('More Information');
  17.               }else{
  18.                                 //change the button label to be 'Hide'
  19.                 toggle_switch.html('Hide');
  20.               }
  21.             });
  22.           });
  23.         });
  24.         </script>
  25.         <style>
  26.         button {
  27.             background:none!important;
  28.             border:none;
  29.             padding:0!important;
  30.    
  31.             /*optional*/
  32.             font-family:arial,helvetica,sans-serif; /*input has OS specific font-family*/
  33.             text-decoration:underline;
  34.             cursor:pointer;
  35.         }
  36.         .round-border {
  37.             border: 0px solid #eee;
  38.             border: 0px solid rgba(0, 0, 0, 0.05);
  39.             -webkit-border-radius: 0px;
  40.             -moz-border-radius: 0px;
  41.             border-radius: 0px;
  42.             padding: 0px;
  43.             margin-bottom: 0px;
  44.         }
  45.         </style>
  46.     </head>
  47.     <body>
  48.         <section class="round-border">
  49.             <div>
  50.                 <button href="#collapse1" class="nav-toggle">More Information</button>
  51.             </div>
  52.             <div id="collapse1" style="display:none">
  53.                 <div id="justify" style="width:574px;text-align:left">
  54.                 <p>First lot of information.</p>
  55.             </div>
  56.         </section>
  57.     </body>
  58. </html></td>
  59.   </tr>
  60.  
  61.   <tr>
  62.     <td colspan="4" style="text-align:right;"><html>
  63.  <head>
  64.     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
  65.     <script>
  66.         $(document).ready(function() {
  67.           $('.nav-toggle').click(function(){
  68.             //get collapse content selector
  69.             var collapse_content_selector = $(this).attr('href');                  
  70.  
  71.             //make the collapse content to be shown or hide
  72.             var toggle_switch = $(this);
  73.             $(collapse_content_selector).toggle(function(){
  74.               if($(this).css('display')=='none'){
  75.                                 //change the button label to be 'Show'
  76.                 toggle_switch.html('More Information');
  77.               }else{
  78.                                 //change the button label to be 'Hide'
  79.                 toggle_switch.html('Hide');
  80.               }
  81.             });
  82.           });
  83.         });
  84.         </script>
  85.         <style>
  86.         button {
  87.             background:none!important;
  88.             border:none;
  89.             padding:0!important;
  90.    
  91.             /*optional*/
  92.             font-family:arial,helvetica,sans-serif; /*input has OS specific font-family*/
  93.             text-decoration:underline;
  94.             cursor:pointer;
  95.         }
  96.         .round-border {
  97.             border: 0px solid #eee;
  98.             border: 0px solid rgba(0, 0, 0, 0.05);
  99.             -webkit-border-radius: 0px;
  100.             -moz-border-radius: 0px;
  101.             border-radius: 0px;
  102.             padding: 0px;
  103.             margin-bottom: 0px;
  104.         }
  105.         </style>
  106.     </head>
  107.     <body>
  108.         <section class="round-border">
  109.             <div>
  110.                 <button href="#collapse1" class="nav-toggle">More Information</button>
  111.             </div>
  112.             <div id="collapse1" style="display:none">
  113.                 <div id="justify" style="width:574px;text-align:left">
  114.                 <p>Second lot of information</p>
  115.             </div>
  116.         </section>
  117.     </body>
  118. </html></td>
  119.   </tr>
  120. </table>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!