Show/Hide div in HTML/PHP

Question

I am learning HTML and PHP. I have developed one simple form using HTML. I want make file upload option hidden. I want show file upload section if user select image or video from drop down. I have searched for achieve this but not getting any proper method. My form is like below

        <div class="form-group">
                <label class="col-md-3 control-label">Category :-</label>
                <div class="col-md-6">
                  <select name="faq_type" id="faq_type" class="select2" required>
                      <option value="0">Text</option>
                      <option value="1">Image</option>
                      <option value="2">Video</option>
                  </select>
                </div>
              </div>

            <div class="form-group" style="display:none;" id="upload">
                <label class="col-md-3 control-label">Select Image/Video :-</label>
                <div class="col-md-6">
                  <div class="fileupload_block" >
                    <input type="file" name="au_picture" value="fileupload" id="fileupload">
                    <?php if(isset($_GET['cat_id']) and $row['au_picture']!="") {?>
                          <div class="fileupload_img"><img type="image" src="images/<?php echo $row['au_picture'];?>" alt="category image" /></div>
                        <?php } else {?>
                          <div class="fileupload_img"><img type="image" src="assets/images/add-image.png" alt="category image" /></div>
                        <?php }?>
                  </div>
                </div>
            </div>

I have added code like below at bottom of page but its not working

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
    $("#upload").css('display', (this.value == '1') ? 'block' : 'none');
}); 
</script>

I want keep fileupload_block hidden and only want show if user select image or video from dropdown. Let me know if someone can help me for that.

My full page is like below

<?php include("includes/header.php");

    require("includes/function.php");
    require("language/language.php");
    require_once("thumbnail_images.class.php");



    if(isset($_POST['submit']))
    {   

      if(!empty($_POST['question']) && !empty($_POST['answer']))
      {


          $question = $_POST['question'];
          $answer = $_POST['answer'];
         $insertQry = "INSERT INTO `faq`( `question`, `answer`) VALUES ('$question','$answer')"; 
        mysqli_query($mysqli, $insertQry);
        $_SESSION['msg']="10"; 
        header( "Location:faq.php");
        exit;   
      }
 else {
        $_SESSION['msg']="10"; 
        header( "Location:add_faq.php");
        exit;   
 }

    }   


?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
     $("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' : 
      'none');
   }); 
</script>

       <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="page_title_block">
            <div class="col-md-5 col-xs-12">
              <div class="page_title">Add FAQ</div>
            </div>
          </div>
          <div class="clearfix"></div>
          <div class="card-body mrg_bottom">
            <form class="form form-horizontal" action="" method="post"  enctype="multipart/form-data" onsubmit="return checkValidation(this);">
              <div class="section">
                <div class="section-body">

                <div class="form-group">
                    <label class="col-md-3 control-label">Category :-</label>
                    <div class="col-md-6">
                      <select name="faq_type" id="faq_type" class="select2" required>
                          <option value="0">Text</option>
                          <option value="1">Image</option>
                          <option value="2">Video</option>
                      </select>
                    </div>
                  </div>

                <div class="form-group" style="display:none;" id="upload">
                    <label class="col-md-3 control-label">Select Image/Video :-</label>
                    <div class="col-md-6">
                      <div class="fileupload_block" >
                        <input type="file" name="au_picture" value="fileupload" id="fileupload">
                        <?php if(isset($_GET['cat_id']) and $row['au_picture']!="") {?>
                              <div class="fileupload_img"><img type="image" src="images/<?php echo $row['au_picture'];?>" alt="category image" /></div>
                            <?php } else {?>
                              <div class="fileupload_img"><img type="image" src="assets/images/add-image.png" alt="category image" /></div>
                            <?php }?>
                      </div>
                    </div>
                </div>

                  <div class="form-group">
                    <div class="col-md-3">
                      <label class="control-label">Question :-</label>
                    </div>
                    <div class="col-md-6">
                     <textarea name="question" id="question" rows="1" class="form-control" ></textarea> 
                    </div>
                  </div>


                  <div class="form-group">
                    <div class="col-md-3">
                      <label class="control-label">Answer:-</label>
                    </div>
                    <div class="col-md-6">
                     <textarea name="answer" id="answer" rows="1" class="form-control" data-emojiable="true"></textarea> 
                    </div>
                  </div>

                  <div class="form-group">&nbsp;</div>
                  <div class="form-group">
                    <div class="col-md-9 col-md-offset-3">
                      <button type="submit" name="submit" class="btn btn-primary">Save</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div> 
<?php include("includes/footer.php");?>

Thanks

Answer 1

If i understand your problem correctly, all you need to do is add an "or" statement:

  $('#faq_type').on('change', function () {    
     $("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' : 
      'none');
   });