How to show hidden div section by clicking button

Question

css file
    .middle-section2{
    display: none;
        }
   .middle-section2-area{
    position: absolute;
    left: 250px;
    top: 1600px;
    width: 1000px;
    height: 300px;
    background-color: #aaaaaa;
    border: 2px hidden;
    padding: 10px;
      }

  .middle-section2-name{
    position: absolute;
    left: 650px;
    top: 1500px;
    width: 200px;
    height: 40px;
    background-color: #aaaaaa;
    border: 2px hidden;
    padding: 10px;
      }

  .middle-section2-edit{
    position: absolute;
    left:850px;
    top:1485px;
      }

  .middle-section2-edit img{
    width: 20px;
    margin: 5px;

      }

Js file

  $(function() {
        $("#middle-section2").hide();
        $("#btn").click(function(event) {
            event.preventDefault();
            $("#middle-section2").toggle();
        });
    });

Html file

div class="middle-section2">
  <div class="col-lg-12">
    <div class="container-fluid">
      <div class="middle-section2-name">
      </div>

      <div class="middle-section2-edit">
        <%= image_tag 'settings-logo.png'%>
      </div>

      <div class="middle-section2-area" >
        <p>carosel</p>
      </div>

    </div>
  </div>

<div class="button-field">
    <div class="col-lg-12">
      <div class="container fluid">
    <button class="button"  id="btn">+</button>
      </div>
  </div>
  </div>

Im new to rails and , i want to show hiddene div section by clicking button. I tried it with this code. but still it doesn't work . I know some small problem having their. but still couldn't find it. No errors shown by console. but it not work pls help me to make it work

Answer 1

try changing #middle-section2 to .middle-section2

  $(function() { $(".middle-section2").hide(); $("#middle-section2").hide(); $("#btn").click(function(event) { event.preventDefault(); $(".middle-section2").toggle(); }); }); 

 .middle-section2{ width:120px; height:150px; display:inline-block; background:blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="middle-section2"></div> <button id="btn">toggle</button>