Display DIV onclick and hide onclick with transition

The easiest way to do this would be to attach event listeners to each of the elements and then use the .fadeToggle() method to show/hide the corresponding element.

Example Here

$('#a1').on('click', function () {
    $('#b1').fadeToggle();
});
$('#a2').on('click', function () {
    $('#b2').fadeToggle();
});

Since this could get relatively redundant, you could simplify it to the following:

Example Here

var mapping = {
    'a1': 'b1',
    'a2': 'b2'
}
$('.head_dd [id]').on('click', function () {
    $('#' + mapping[this.id]).fadeToggle();
});

Without jQuery:

You could also use plain JavaScript and CSS3 transitions:

var mapping = {
    'a1': 'b1',
    'a2': 'b2'
}
Array.prototype.forEach.call(document.querySelectorAll('.head_dd [id]'), function (el) {
    el.addEventListener('click', function () {
      document.getElementById(mapping[this.id]).classList.toggle('visible');
    });
});

.bt1int {
    opacity: 0;
    transition: opacity 1s;
}
.visible {
    opacity: 1;
}

<div class="wrap">
    <ul class="head_dd">
        <li id="a1">a1</li>
        <li id="a2">a2</li>
    </ul>
</div>
<div class="bt1int" id="b1">b1</div>
<div class="bt1int" id="b2">b2</div>

Try this one.

HTML code should put data on div content to differ between them.

<div class="wrap">
             <ul class="head_dd">
                <li id="a1">INTERIOR</li>
                <li id="a2">EXTERIOR</li>
            </ul>
 </div>

 <div class="bt1int" id="b1" style="display: none;">a</div>
 <div class="bt1int" id="b2" style="display: none;">b</div>

JS code(place this on head section or bottom of body)

<script>
$(function(){

  $('#a1').on('click',function(){
    $('#b2').hide();
    $('#b1').show();
  });
  $('#a2').on('click',function(){
    $('#b1').hide();
    $('#b2').show();
  });
});
</script>

Add name attribute of each li as target div id

    <ul class="head_dd">
        <li id="a1" name="b1" >INTERIOR</li>
        <li id="a2" name="b2" >EXTERIOR</li>
    </ul>

then add following js

$(".head_dd li").click(function(e){
    var targetId = $(this).attr("name");
    if($("#"+targetId).is(':visible')){
        $("#"+targetId).hide(); 
    }else{
        $("#"+targetId).show();
    }
});

Attach event listeners to to the elements.

var a1 = $('#a1');
var a2 = $('#a2');
var b1 = $('#b1');
var b2 = $('#b2');

a1.addEventListener('click', function(){
  b1.slideToggle(600);
});

a2.addEventListener('click', function(){
  b2.slideToggle(600);
});

or the alternate

$('#a1').on( 'click', function(){
  $('#b1').slideToggle(600);
});

$('#a2').on( 'click', function(){
  $('#b2').slideToggle(600);
});