How to Show Statewise Team Members With Details in WordPress?

HTML

– Add this HTML div block where you want to show Map.

<div id="world-map" style="width: 100%; height: 400px;">><div>

– Add this map CSS in your Header or Footer file.

<link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen">>

– Add this map js in Footer file.
<script src="jquery-jvectormap-2.0.3.min.js"><script>>
<script src="jquery-jvectormap-us-aea-en.js"><>script>>

– Here is the code, which was used to initialize the map below.
<script>
jQuery(document).ready(function() {
jQuery(function(){
// pass 'us_aea_en' for USA
jQuery('#world-map').vectorMap({map:'us_aea_en',
markerStyle: { initial: { fill: '#e48715',},
hover: { fill: '#e46815' } },
backgroundColor: '#fff',
regionStyle: { initial: { fill: '#e48715',},
hover: {fill: '#e46815' } }
});
<script>>

– If you open created page in a web-browser you should see something similar to this:

Now, move on 2nd step to create custom post type for team members.
– To create custom post type you can use Toolset Types Plugin, custom post type Plugin or create custom post type using code.

– “Toolset Types plugin”

– Download : https://wordpress.org/plugins/types/ (Ref)

– Install the plugin and create team post type.

Now, Move on 3rd step to create accordion.
-We need to add HTML block.
<div id="accordion" class="accordion">
<a href="#Arizona" class="accordion-section-title" id="Arizona">>Arizona<a>&gt
<div id="Arizona" class="accordion-section-content">>
<div>><
div>>

Add js for Accordion
jQuery(document).ready(function() {
function close_accordion_section() {
jQuery(‘.accordion .accordion-section-title’).removeClass(‘active’);
jQuery(‘.accordion .accordion-section-content’).slideUp(300).removeClass(‘open’);
}

jQuery(‘.accordion-section-title’).click(function(e) {
// Grab current anchor value
var currentAttrValue = jQuery(this).attr(‘href’);

if(jQuery(e.target).is(‘.active’)) {
close_accordion_section();
}else {
close_accordion_section();

// Add active class to section title
jQuery(this).addClass(‘active’);
// Open up the hidden content panel
jQuery(‘.accordion ‘ + currentAttrValue).slideDown(300).addClass(‘open’);
}

e.preventDefault();
});
});

– Add js to scroll move to top
jQuery(‘a#world-map’).live(“click”,function (evt) {
evt.preventDefault();
$(‘.accordion .accordion-section-content.open’).css(“display”,”none”);
$(‘html, body’).animate({
scrollTop: (jQuery(‘#world-map’).offset().top – 50)
}, ‘slow’);
});

Finally, last step to add js for click on map any area and get details for team members in accordion.
JS:

After all completed your step you can see in browser.