Hide an element on click and show block of elements

Question

I've been trying to do a design which requires a preview of an image within an input box and playing around hide and show elements. I have successfully done the preview image with the help of someone on this site and now I've been trying to solve the hide and show element using JS but to no avail.

Let me explain my problem, I have six main boxes and one orange box. But I just want to show 3 boxes on the form and hide the other 3 boxes, so that whenever a user clicks on the orange box it will display the 3 hidden box and hide itself and show a checkbox which will be marked or checked. When for example someone unchecks the check box it will return as it was before.

I tried doing it this way , here is my script

    $(function() {
      var count = 0;
      $('.upload-img').on('change', function(evt) {
        var file = evt.target.files[0];
        var _this = evt.target;
        $(this).parent('.upload-section').hide();
        var reader = new FileReader();
        reader.onload = function(e) {
          var span = '<img class="thumb mrm mts" src="' + e.target.result + '" title="' + escape(file.name) + '"/><span class="remove_img_preview"></span>';
          $(_this).parent('.upload-section').next().append($(span));
        };
        reader.readAsDataURL(file);
        evt.target.value = "";
      });

      $('.preview-section').on('click', '.remove_img_preview', function() {
        $(this).parent('.preview-section').prev().show();
        $(this).parent('.preview-section').remove();
      });
    });

    $(function(){
      var answer = $(".answer");
      var clickable = $(".clickable");
      answer.hide()
      $(".file_container-orange").on("click", function(){
        $(this).hide()
        if(!answer.is(":visible")){
          answer.show().addClass("clickable")
        }else{
          answer.hide();
        }
      })
      //EXTRA:: makes the button and answer toggle on click
      $("body").on("click", ".clickable", function(){
        $(this).hide();
        if(!answer.is(":visible")){
          $(".file_container-orange").show();
        }
      })
    })

and also you can check the link and see, more on it

https://plnkr.co/edit/jtUvlq4lClyfFHrFmzzO?p=preview

But don't know how I can make it return to how it was before when I will click on the check box.

Answer 1

1. To check the checkbox when click on the orange box, use this below code after the line

answer.show().addClass("clickable")
$("[type='checkbox']").prop("checked", "checked")

2. But don't know how I can make it return to how it was before when I will click on the check box. Use the below code:

$("body").on("change", "[type='checkbox']", function() {
  if (!$(this).prop("checked")) {
    answer.hide();
    $(".file_container-orange").show();
  }
})

Please refer the working sample here https://plnkr.co/edit/5Wy6rNkATY3cbT8v4RWH?p=preview