javascript - How to make one option active and disable the others -

i'm creating navbar. when click 1 of options , option becomes active when click on other option previous option active remains there

see fiddle example : https://jsfiddle.net/bpmbu3th/

i want make item active clicked

my html

  <p id="parent1">i'm parent</p>   <p id="child1">i'm first child</p>    <p id="parent2">i'm 2nd parent</p>   <p id="child2">i'm second children</p> 

my css

 #parent1{     background-color:#000;    color:#fff;  }  #child1{    display:none;   background-color:red;   color:#fff;  }  #parent2{    background-color:#000;   color:#fff;  }  #child2{   display:none;  background-color:red;  color:#fff;  } 

my jquery

  (function(){          var object = {              dropdown1:$('#child1'),             dropdown2:$('#child2'),              dropdown1parent: function(){                 if(object.dropdown1.is(':hidden')){                     object.dropdown1.fadein();                 }                 else{                     object.dropdown1.fadeout();                 }              },              dropdown2parent: function(){                  if(object.dropdown2.is(':hidden')){                     object.dropdown2.fadein();                 }                 else                 {                     object.dropdown2.fadeout();                 }             }              };          $('#parent1').on('click', object.dropdown1parent);         $('#parent2').on('click', object.dropdown2parent);       })();   

you should use common class rid of repetitive code.

here's example

$(function() {    $('.parent').on('click', function() {      var child = $(this).next('.child'); //finds next child      //fade out others handle current child      $('.child').not(child).fadeout(function() {        child.fadetoggle();      })    });  });

.parent {      background-color:#000;      color:#fff;  }  .child {      display:none;      background-color:red;      color:#fff;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <p class="parent">i'm parent</p>  <p class="child">i'm first child</p>  <p class="parent">i'm 2nd parent</p>  <p class="child">i'm second children</p>