title: jQuery if/else statement to toggle content using multiple buttons
body: <p>I have a container and (2) bootstrap buttons inside it. When you click either button an image and text shows, the other button does the same feature but with it's respected image/text. </p>
  
  <p>My client is asking for arrow buttons on the sides of the container and if the user clicks one of the arrow buttons, the content inter-changes based off where the button left off. I've got my actual buttons working fine interchanging the content, I'm just having a hard time where to start when incorporating the arrow buttons. I know the simplest way is an if/else statement but I'm having trouble incorporating that into my working jQuery. </p>
  
  <p>Few minor problems: </p>
  
  <ol>
  <li><p>I have the "Meeting" button set to start as 'active' with the color purple but for some reason it is not working. </p></li>
  <li><p>With my jQuery, I've tried to make it less redundant by attempting to put two classes in one (' ', ' ') before the hide element but it does not work, it shows all content(both images and text).  </p></li>
  </ol>
  
  <p>I hope this makes sense. Any direction is appreciated! </p>
  
  <p>Since I have quite a bit of HTML and CSS code, you can view it all on my codepen here: <a href="https://codepen.io/dec23rd1986/pen/PdEoZa?editors=1010" rel="nofollow noreferrer">https://codepen.io/dec23rd1986/pen/PdEoZa?editors=1010</a></p>
  
  <p>My jQuery: </p>
  
  <pre><code>$(document).ready(function(){
    $('.feature_tasks').hide();
        $('.tasks_img').hide();
      $('#meeting_button').click (function(){
          $('.feature_tasks').hide();
        $('.tasks_img').hide();
  $('.feature_info').fadeIn(3000);
        $('.meeting_img').show();
  
  });
  
  $('#tasks_button').click (function(){
  $('.feature_info').hide();
    $('.meeting_img').hide();
  $('.feature_tasks').fadeIn(3000);
    $('.tasks_img').show();
    });  
  });
  </code></pre>