jQuery Simple Example

HTML

<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<div class="js-bottom-navbar__consultant bottom-navbar__consultant">
  <p>Some text too</p>
  <p class="js-consultant__button consultant__button consultant__button--online">                <span class="button__text--desktop">Some text</span>
  </p>
</div>
<div class="bottom-navbar__consultant-content navbar__consultant-content ">
  <div class="consultant__details consultant__status--online consultant__status">
    <img class="consultant__img" src="">
    <div class="consultant__text">
      <p class="consultant__name">
        Name
      </p>
      <p class="consultant__specification">
        Specification
      </p>
      <a href="#" class="consultant__question">
        Start
      </a>
    </div>
  </div>       
</div>

<script src="http://www.addressfinder.co.nz/assets/v2/widget.js"></script>

CSS

.bottom-navbar__consultant-content {
  display: none;
   background: green;
}
.navbar__consultant-content--opened {
  display: block;
}
.js-bottom-navbar__consultant {
  background: red;
}

JavaScript

$(document).ready(function() {
    $('.js-bottom-navbar__consultant').click(function () { 
    	$('.bottom-navbar__consultant-content').toggleClass('navbar__consultant-content--opened');
    });
    /**$(document).on('click', function(e) {
        if ($(e.target).is('.js-bottom-navbar__consultant') === false) {
            $('.bottom-navbar__consultant-content').removeClass('navbar__consultant-content--opened');
        }
    });**/ 
});