$25
Show/Hide Meta Box in Wordpress using Jquery

I have a function I created in wordpress in the functions.php file that adds a meta box so I can add additional information for my posts. I want to be able to show/hide this meta box everytime the user chooses the specific category I have created (checks and unchecks the category under the category tab). I prefer doing this using jquery.

The tutorial I found does this but I'm unable to implement it because the instructions are not clear. The web page is: http://www.farinspace.com/show-hide-meta-box-by-category/

There's even a youtube video on top where he goes into detail.

This is the wordpress function that creates the meta box:



function ahng_add_video_meta_box() {

    add_meta_box(

        'ahng_video_meta_box',

        'Video Meta Options',

        'ahng_video_options_meta_box_func',

        'post'

    );

}

This is the jquery code:



<script type="text/javascript">

//<![CDATA[

 

    jQuery(function($)

    {

        function my_check_categories()

        {

            $('#ahng_video_meta_box').hide();

 

            $('#categorychecklist input[type="checkbox"]').each(function(i,e)

            {

                var id = $(this).attr('id').match(/-([0-9]*)$/i);

 

                id = (id && id[1]) ? parseInt(id[1]) : null ;

 

                if ($.inArray(id, [4,3]) > -1 && $(this).is(':checked'))

                {

                    $('#ahng_video_meta_box').show();

                }

            });

        }

 

        $('#categorychecklist input[type="checkbox"]').live('click', my_check_categories);

 

        my_check_categories();

    });

 

//]]>

</script>

And this is where I reference the jquery at the bottom of my functions.php (wp_enqueue_script) :



function my_admin_styles() {

wp_enqueue_style('thickbox');

wp_enqueue_script('category_sh_css', 'http://localhost/wordpress/wp-content/themes/ahangerooz/js/category-sh.js', false);

wp_enqueue_style('style_meta_box_css','http://localhost/wordpress/wp-content/themes/ahangerooz/style-meta-box.css');

}

Karlo Rihoo | 02/14/12 at 1:25pm | Edit

(1) Possible Answers Submitted...

Last edited:
02/14/12
2:05pm
Ross Wilson says:
Hi Karlo,

I can debug this in just a couple minutes if you can give me temporary access to your admin panel. Any way you can do that? Email me ross@wilsonwc, or pm here on javascriptquestions.

Ross
- 02/14/12 2:19pm
  
  Karlo Rihoo says:
  Hi Ross,
  
  Thanks for replying so quickly. I wish I could give you temporary access but I'm running this localhost on my work pc and don't have it setup online. Otherwise, do you have any suggestions as to what I'm doing wrong?
  
  Karlo.
- 02/14/12 2:27pm
  
  Ross Wilson says:
  I sent you a testing site and login so you can upload your theme and we can debug it there. That will be a lot faster than trying to go back and forth here.
  
  Ross
- 02/14/12 3:43pm
  
  Karlo Rihoo says:
  Hi Ross,
  I've uploaded the theme to your themes folder.
  
  Please update me.
  
  Thanks.
  
  Karlo.
- 02/14/12 4:20pm
  
  Ross Wilson says:
  All Fixed, I sent you a link to download the updated code.
  
  A few details on the fixes:
  
  When you have a .js file you don't need the <script> tags inside the js file.
  
  I also updated your theme to use the theme path variable to include the scripts instead of hardcoding the path.
  
  Let me know if you have any questions.
  
  Ross
- 02/14/12 6:17pm
  
  Karlo Rihoo says:
  Hi Ross,
  
  Thank you. Looks great.
  
  I will post another question and I was wondering if you might be able to tackle this for me. There's 2 things I want to do.
  
  1) show a certain meta box based on what category is checked, as of right now, it's checking the id of the category. i would rather have it check based on the name of the category.
  
  2) If I click on a specific category, for example videos, all other categories will be unchecked, basically i want one category checked at a time.
  
  I hope that makes sense.
  
  Thanks.