Q:

How to show all content and why can't filter by id

 <div class="filter hidden-xs hidden-sm hidden-md">
      <a href="?type=all" id="all">View All</a>
      <a href="?type=zoologist" id="zoologist">Zoologist</a>
      <a href="?type=hobbyist" id="hobbyist">Hobbyist</a>
      <a href="?type=judge" id="judge">Judge</a>
  </div>

<div id="accordion"></div>

JSON
 var JSONObject = [
    {
      "name": "Jonathan Suh",
      "type": "zoologist, hobbyist"
    },
    {
      "name": "William Philbin",
      "type": "judge, hobbyist"
    },
    {
      "name": "Allison McKinnery",
      "type": "hobbyist"
    }
  ];

Jquery
 $('.filter a').on('click', function(e){

              e.preventDefault();
              var filter = $(this).attr('id');

              $.ajax({
                type: 'GET',
                url: 'http://path/to/example.json,
                dataType: 'json',
                data: {"type" : filter},
                cache: false,
                beforeSend: function(){
                  console.log('loading');
                },
                success: function(response){
                  console.log('success');
                  var details = '';
                  for (var key in response) {
                    if (response.hasOwnProperty(key)) {

                      details+='<h1 class="name">' + response[key]["name"] + '</h1>';
                      details+='<div class="accordion-content row">'+response[key]["gender"]'</div>';

                    }
                  }

                  $('#accordion').html(details).fadeIn();

                },
                error: function (jqXHR, textStatus, errorThrown) {
                  console.log('XHR ' + jqXHR);
                  console.log('status ' + textStatus);
                  console.log('error ' + errorThrown);
                },
                complete: function(){
                  console.log('finished all tasks');
                }

            });
       });

Js fiddle
Worked on $.ajax and it somehow works by showing the accordion content. There are two or three problems that I couldn't get around. 
At first thought about matching with the window.location.search but ended up trying to filter by id instead.

you notice that i put data: {"type" : filter} which would get name from json and compare with 'filter'. It does not do anything. Why? How to filter by type in json and find all info that are filtered by type?
When first load the page, it doesn't show all content in accordion area. The problem is that all json is processed via $.ajax. Is there any possible way to show all content outside $.ajax? But I do not want to repeat all content if same code inside $.ajax

A:

Since it seems to be clear that you're not sending your "data" anywhere, you'll have to just filter the result/response.
Also, to easily solve your second question - You can just put the ajax in a function, and call this function both on "click" and on "page load".
function loadMyJson(filter) {

 $.ajax({
    type: 'GET',
    url: 'http://path/to/example.json',
    dataType: 'json',
    cache: false,
    beforeSend: function() {
        console.log('loading');
    },
    success: function(response) {
        console.log('success, filtering response...');

        //Filter the returned json by "filter"            
        var filteredJson = $(response).filter(function (i,n) { 
            return n.type === filter; 
        });

        var details = '';
        for (var key in filteredJson) {
            if (filteredJson.hasOwnProperty(key)) {
              details+='<h1 class="name">' + filteredJson[key]["name"] + '</h1>';
              details+='<div class="accordion-content row">'+filteredJson[key]["gender"]'</div>';
            }
        }
        $('#accordion').html(details).fadeIn();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log('XHR ' + jqXHR);
        console.log('status ' + textStatus);
        console.log('error ' + errorThrown);
    },
    complete: function(){
        console.log('finished all tasks');
    }
 });
}

$('.filter a').on('click', function(e) {
    e.preventDefault();
    loadMyJson($(this).attr('id'));
}

loadMyJson('all'); //This is for the initial page load

