JSFiddle - React, Tailwind, and code Playground
HTML
<div class="tags">
<h3>service</h3>
<label><input type="checkbox" id="type-Website" rel="Website">Website</label>
<label><input type="checkbox" id="type-Email" rel="Email">Email</label>
<label><input type="checkbox" id="type-Branding" rel="Branding">Branding</label>
<h3>sector</h3>
<label><input type="checkbox" id="type-Automotive" rel="Automotive">Automotive</label>
<label><input type="checkbox" id="type-Property" rel="Property">Property</label>
</div>
<div class="portfolio-item" data-id="one-page-website" data-category="Automotive Email Website" style="display: block;">
<h1 class="entry-title">One Page Website</h1>
</div>
<div class="portfolio-item" data-id="some-logo" data-category="Branding Property" style="display: block;">
<h1 class="entry-title">some Logo</h1>
</div>
<div class="portfolio-item" data-id="some-email-campaign" data-category="Automotive Email" style="display: block;">
<h1 class="entry-title">Some Email Campaign</h1>
</div>
<div class="portfolio-item" data-id="some-brand" data-category="Automotive Branding Email" style="display: block;">
<h1 class="entry-title">some brand</h1>
</div>
<div class="portfolio-item" data-id="property company" data-category="Branding Email Property Website Automotive" style="display: block;">
<h1 class="entry-title">Stationery</h1>
</div>
JavaScript
<?php
/*
Plugin Name: Custom Taxonomy DropDown
Author: Hameedullah Khan
Aurhot URI: http://hameedullah.com
*/
// change this to your taxonomy
$brand_taxonomy = 'category';
$taxonomy_name = 'Brands';
/* registering taxonomy */
/* disabled assuming you already have regsitered taxonomy */
/*
add_action('init', 'my_taxonomy');
function my_taxonomy() {
global $brand_taxonomy, $taxonomy_name;
register_taxonomy($brand_taxonomy,array('post'),array('labels'=>array('name'=>$taxonomy_name),'public'=>true,'hierarchical'=>true));
}*/
add_action('add_meta_boxes', 'my_custom_metabox');
function my_custom_metabox() {
add_meta_box('custom-taxonomy-dropdown','Brands','taxonomy_dropdowns_box','post','side','high');
}
function taxonomy_dropdowns_box( $post ) {
global $brand_taxonomy, $taxonomy_name;
wp_nonce_field('custom-dropdown', 'dropdown-nonce');
$terms = get_terms( $brand_taxonomy, 'hide_empty=0');
if ( is_a( $terms, 'WP_Error' ) ) {
$terms = array();
}
$object_terms = wp_get_object_terms( $post->ID, $brand_taxonomy, array('fields'=>'ids'));
if ( is_a( $object_terms, 'WP_Error' ) ) {
$object_terms = array();
}
// you can move the below java script to admin_head
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#custombrandoptions').change(function() {
var custombrand = jQuery('#custombrandoptions').val();
if ( custombrand == '0') {
jQuery('#custommodeloptions').html('');
jQuery('#modelcontainer').css('display', 'none');
} else {
jQuery('#ctd-custom-taxonomy-terms-loading').css('display', 'inline');
jQuery('#modelcontainer').css('display', 'none');
var data = {
'action':'get_brand_models',
'custombrand':custombrand,
...