var bflProfile = document.getElementById('profile');
var bflSettings = document.getElementById('settings');
 function bflprofile() {
  bflProfile.style.display = "block";
  bflSettings.style.display = "none";
 }
 function bflsettings() {
  bflProfile.style.display = "none";
  bflSettings.style.display = "block";
 }

<div class="col-md-4 col-sm-6 col-xs-12">
      <div class="sidebar" >
        <a onclick="bflprofile()" href="javascript:void(0)"><i class="fa fa-pencil"></i> Edit Profile <span><i
                class="fa fa-chevron-right"></i></span></a>
        <a onclick="bflsettings()" href="javascript:void(0)"><i class="fa fa-cog"></i> Account Settings<span><i
                class="fa fa-chevron-right"></i></span></a>
      </div>
    </div>

    <div class="col-md-8 col-sm-6 col-xs-12">
      <div id="profile" class="bflProfile">
        <h3>Basic information</h3>

        <div class="row">
          <div class="col-md-4 col-xs-12">

            <!--Profile Image-->
            <div class="profileImage pull-left">
              <figure class="text-center">
                <img class="image-rounded img-fluid" src="images/author.png" alt="codesign_profile">
                <figcaption>
                  <span><i class="fa fa-pencil"></i> change photo</span>
                </figcaption>
              </figure>

            </div>
          </div>

          <div class="col-md-8 col-xs-12">

            <!--Profile Form-->
            <div id="profileForm" class="profileForm">
              <form>
                <div class="form-row">

                  <div class="form-group col-md-6">
                    <label for="fName">First Name*</label>
                    <input type="text" class="form-control" id="fName" aria-describedby="emailHelp"
                           placeholder="amitichard@gmail.com">
                  </div>
                  <div class="form-group col-md-6">
                    <label for="lName">Last Name*</label>
                    <input type="text" class="form-control" id="lName" placeholder="Password">
                  </div>

                </div>

                <div class="form-row">
                  <div class="form-group col-12">
                    <label for="occupation">Occupation*</label>
                    <input type="password" class="form-control" id="occupation"
                           placeholder="amitichard@gmail.com">
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group col-12">
                    <label for="bflCompany">Company</label>
                    <input type="text" name="" id="bflCompany" class="form-control" placeholder="CoDesign Limited">
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group col-6">
                    <label for="location">Location *</label>
                    <input type="text" name="" id="location" class="form-control" placeholder="Bangladesh">
                  </div>

                  <div class="form-group col-6">
                    <label for="city">City *</label>
                    <input type="text" name="" id="city" class="form-control" placeholder="Dhaka">
                  </div>
                </div>


                <div class="form-row">
                  <label for="webUrl">Website URL</label>
                  <input type="url" name="" id="webUrl" class="form-control" placeholder="www.amithrichard.com">
                </div>

              </form>


            </div>
          </div>
        </div>

        <hr style="margin:30px 0; display: block">
        <!--Bio Text-->
        <div class="form-row">
          <label for="shortBio">short bio</label>
          <textarea class="form-control" name="" id="shortBio" cols="30" rows="5">Do you know how to create a memory that lasts forever? I do.You start with a blueprint woven together with a message both simple and powerful that engages you on a deep emotional level. You take that and give it a visual so stunning that it creates something more than a memory- it creates an impression. It changes perception. Design cannot simply serve the purpose of being aesthetically appealing but it must create an impact on whoever it touches. Every piece of work I do contains a part of my passion, creativity and vision which I impart through it.

          </textarea>
        </div>
        <hr style="margin:30px 0; display: block">

        <h3>social media links</h3>

        <div class="row">
          <div class="col-md-6 col-sm-6">

            <div class="socialMedia d-flex">
              <div class="kb-icon"><img src="images/facebook.svg" alt=""></div>
              <div class="kb-input">
                <input type="text" class="form-control" placeholder="http://facebook.com/amitrichard">
              </div>
            </div>
            <div class="socialMedia d-flex">
              <div class="kb-icon"><img src="images/linkedin.svg" alt=""></div>
              <div class="kb-input">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="socialMedia d-flex">
              <div class="kb-icon"><img src="images/instagram.svg" alt=""></div>
              <div class="kb-input">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="socialMedia d-flex">
              <div class="kb-icon"><img src="images/twitter.svg" alt=""></div>
              <div class="kb-input">
                <input type="text" class="form-control">
              </div>
            </div>

          </div>

          <div class="col-md-6 col-sm-6">
            <div class="socialMedia d-flex">
              <div class="kb-icon"><img src="images/pinterest.svg" alt=""></div>
              <div class="kb-input">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="socialMedia d-flex">
              <div class="kb-icon"><img src="images/behance.svg" alt=""></div>
              <div class="kb-input">
                <input type="text" class="form-control">
              </div>

            </div>
            <div class="socialMedia d-flex">
              <div class="kb-icon"><img src="images/dribbble.svg" alt=""></div>
              <div class="kb-input">
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="socialMedia d-flex">
              <div class="kb-icon"><img src="images/google-plus.svg" alt=""></div>
              <div class="kb-input">
                <input type="text" class="form-control">
              </div>
            </div>

          </div>
        </div>




      </div>
      <div id="settings" class="bflSettings">
        <h3>account information</h3>

        <div id="settingsForm" class="settingsForm">
          <form>
            <div class="form-group col-md-6">
              <label for="exampleInputEmail1">Primary Email Address *</label>
              <input type="email" class="form-control" id="exampleInputEmail1"
                     placeholder="amitichard@gmail.com">
            </div>
            <br/>
            <div class="form-group col-md-6">
              <label for="bflUsername">Username*</label>
              <input type="text" class="form-control" id="bflUsername" placeholder="username">
            </div>

            <div class="bfl_url col-md-12">
              <label for="inlineFormInputGroup">BFL URL</label>
              <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <div class="input-group-text">http://banglafontlibrary.com/id/</div>
                </div>
                <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="richard">
              </div>
            </div>

            <hr style="margin:40px 0; display: block">

            <h3>Change Password</h3>
            <div class="form-row">

              <div class="form-group col-md-6">
                <label for="bflPassword">New Password*</label>
                <input type="password" class="form-control" id="bflPassword" aria-describedby="emailHelp"
                       placeholder="amitichard@gmail.com">
              </div>
              <div class="form-group col-md-6">
                <label for="bflUsernameconfirm">Retype New Password*</label>
                <input type="text" class="form-control" id="bflUsernameconfirm" placeholder="Password">
              </div>



              <small>**Password must be a minimum of six letters/characters</small>
            </div>

          </form>
        </div>
      </div>

    </div>
  </div>