082NeT

Expand Ajax-Spoiler effects 2

If you are using prototype.js + effects.js or mootools.js, You can apply some effects anywhere on blog and there is various way to apply them. This is one of them and using javascript functions in Ajax-Spoiler plugin.

This post follows Ajax-Spoiler v0.9

There is some way to apply effects and this post explains one of them.
See this post also.

Create Javascript

  • At first, you should know which is your $js_library (in aj-spoiler.php).
  • Create your-file-name.js(any name you like) with text-editor or notepad
  • Wp-Scripts plugin users can use wp-scripts/js/site.custom.js and select ‘Your custom’ on option panel.
  • Copy and past code below to created file.
    • In case of using ‘mootools’: 
      • 

    • In case of using 'prototype':

      • 

    

    • 

  • If you want to limit affected elements, change $$('.collapse-body') to $$('#sidebar h2.collapse-body') or else. — (same as CSS selector.)
    • 

  • Save file and

      

    • wp-scripts users : Upload edited site.custom.js to wp-scripts/js folder and select 'Your Custom' on option panel.
      • 

    • Others: Upload created .js file to current theme folder. Then open header.php and insert code below to under  and re-upload it.

      

      • 

    

    • 



Edit Template File


    

  • This example is for sidebar.php but you can apply it to any template.
    • 

  • General sidebar.php template composed like this(default theme):





  • Let's apply effect to 'Categories'. Change 
    

    Categories
    

     to:
    

    Categories

    

    • 

  • Replace 

       just below with:
      

      


    • Note:: Each elements on page must have it's own 'id'. 
      • 

    • If you want to make specified element hidden first, append class "hide_first" to 

        

        


      • Entire code will be:

        Categories
         
     
           
       
     
         
 
        • 


      

      You can check example for default theme with attached file below.
      

      download  default-example.zip(5.1 KB)
      

    • 







    

    


    082net
    


    


    








    



    


	
    
		5 responses to “Expand Ajax-Spoiler effects 2”	
    

	
    
		
    
		
    
	
    

	
      
			
    1. 
			
      
				

				
      
					
      Hello there! Do you know if they make any plugins to help with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Thank you!
      
				
      

							
      
		
      2. 
		
    2. 
			
      
				

				
      
					
      No worries dude.. sorry for any hassles i gave you in correcting the mistakes.
      
I would have thought the adding script in the code wrapper would have made the  > displayable, nevermind.
      

      Hope that someone can find a use for this and maybe expand it a little.
      
would be great to see a plugin that would add a selection the the widget options to make it collapsible or not on load.
      

      By the way 082net thanks for the spoiler script. It the only one i found that does what it says it does.
      
				
      

							
      
		
      3. 
		
    3. 
			
      
				

				
      
					
      Global Native// I’ve edited your first comment with ‘code’ tag and removed your other comments for fixing broken codes. Is that right:???:
      

      Oh, I forgot to say thanks:)
      
				
      

							
      
		
      4. 
		
    4. 
			
		
      5. 
		
    5. 
			
      
				

				
      
					
      Add Ajax-Spoiler to widgets with out recoding them.
      

      I was working on the collapsible navigation based on your Ajax-Spoiler plugin and made a few changes sop that i wouldn’t have to hand code every widget. These changes enable you also to add callapsable menus to widgets with just a few clicks. I am using the mootools code. 
      

      This will work as long as the widget has a title with the class “collapsible” and a div wrapper for the content beginning straight after the header . I.E. the included widget search in the widgets package does not have a title and a little hand coding will fix this.
      

      I will one day get around to making this a WP plugin. 
      

      ————————————————————————-
      
with site.custom.js use….( for mootools
      
————————————————————————-
      

      function mySidebarLoader() { 
      

        // do not add spoiler to these widgets ( Titles must be exactly the same)
      
  var ignore = new Array("Title 1", "Title 2", "ETC");
      

        // Collaspse these onload ( Titles must be exactly the same)
      
  var collaspe = new Array("Title 1", "Title 2", "ETC");
      

        $$('.collaspable').each(function(el){
      

          var tid = el;
      
    if(!ignore.test(tid.firstChild.nodeValue)){
      

            var ele = el.getNext();
      

            if(tid.nodeName == 'H3' && ele.nodeName != 'a'){
      
        tid.onclick = function(){Spoiler.Collapse(ele, 'blind', tid, {duration: 400}); return false;};
      
        tid.addClassName('effcollapse');
      
        if(ele.hasClassName('hide_first') || collaspe.test(tid.firstChild.nodeValue)) {
      
          Spoiler.Collapse(ele, 'blind', tid, {duration: 600});
      
        }
      
      }
      

          }
      
  }, this);
      
}
      
window.addEvent('load', mySidebarLoader);
      

      ————————————————————————-
      
then with your dynamic sidebar code.
      
————————————————————————-
      
// The trick being to add the class "collapsible" to the header
      
// and wrap the content in a single div beginning from straight after the header to the end of the widget
      

      if ( function_exists('register_sidebar') )
      
    register_sidebars((2),array(
      
        'before_widget' => '
      

      ',
      
        'after_widget' => '
      

      ',
      
        'before_title' => '
      

      ',
      
        'after_title' => '
      

      ',
      
    ));
      

      
				
      

							
      
		
      6.