Q:

Hide/Show elements when an event is triggered

I'm trying to manage triggered events on buttons but I can't get the exact result. By default, the div id="mailArea" is displayed but when I click on web button, I would like that this div is hidden and vice-versa.
    Can someone help me please?
    Thanks in advance!

#mailArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px; 
  margin-top: 5px;
}

#mailwebArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px; 
  margin-top: 5px;
}
<div id="choiceMail">
    <input type= "radio" name="mail_type" value="text" onchange="$('#result').hide()" checked > Texte
    <input type="radio" name="mail_type" value="web" onchange="$('#result').show()"> Web
    <div>
        <div id="mailArea"></div>
    </div>
</div>
    <div id="result" style="display:none">
        <button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-weight: https://jsfiddle.net/t44aqpw0/3/#forkbold; font-size: 12px;' onclick='commande('bold');' title='Mettre votre en gras'>G</button>
        <button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-style: italic; font-size: 12px;' onclick='commande('italic');' title='Mettre votre texte en italique'>I</button>
        <button class='btn btn-primary btn-md' style='height: 25px; margin-top: 2px; text-align: center; font-style: italic; font-size: 12px;' onclick='commande('underline');' title='Soulignez votre texte'>S</button>       <button class='btn btn-primary btn-md' onclick='taille('+', 'mailArea')' style='height: 25px; width: 30px; padding: 0' title='Augmenter la taille du texte'><span class='glyphicon glyphicon-plus'></span>             </button>
        <button class='btn btn-primary btn-md' onclick='taille('-', 'mailArea')' style='height: 25px; width: 30px; padding: 0' title='Diminuer la taille du texte'><span class='glyphicon glyphicon-minus'></span>             </button>
    <div id='mailwebArea' class='form-control animated' contenteditable='true'></div>
    <div>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

A:

Here is a simple show/hide of your 'mailArea' div based on radio buttons selections: 

$('input[type=radio][name=mail_type]').on('change', function() {
  if ($(this).val() == 'text') {
    $('#mailArea').show();
  } else if ($(this).val() == 'web') {
    $('#mailArea').hide();
  }
});
#mailArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px;
  margin-top: 5px;
}

#mailwebArea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  height: 200px;
  overflow: auto;
  padding: 5px;
  resize: both;
  width: 500px;
  font-size: 12px;
  margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="choiceMail">
  <input type="radio" name="mail_type" value="text" checked> Texte
  <input type="radio" name="mail_type" value="web"> Web
  <div>
    <div id="mailArea">Mail area container</div>
  </div>
</div>

