单击我的图标时如何显示和隐藏我的内容

Question

I just created a card-form(bootstrap) and in the form, there are a plus icon and hidden contents( id=mycontent_1 with display: none ). what I'm trying to do is listed as follows. I tried to do the first one on my java-script but it's not working.

1. when I click plus icon, my function(toggler) should be executed and the icon would be hidden and my contents(text boxes and delete button) have to be visible.

2. similarly in opposite direction, when I click the delete button, my contents(text boxes and a delete button) have to be invisible and the plus icon should be visible.

need your kind helps for my two functions. here are my codes for jsfiddle.

https://jsfiddle.net/Sanchez/aq9Laaew/219304/

       <div class="col-sm-6">
            <div class="card">
              <div class="card-header" id="cardHeader1" style="visibility: hidden;"> no name </div>
          <div class="card-body">
            <a href="#" class="btn btn-info btn-lg" onclick="toggler('myContent_1');">
              <span class="glyphicon glyphicon-plus" id=icon1  onclick="toggler('myContent_1');"></span> Plus 
            </a>
                <div id="myContent_1" class="card-title" style="display: none;" >
              <form action="" method="post">
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Number</span>
                    </div>
                    <input type="text" id="notiSeq_1" name="notiSeq" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-sort-numeric-asc"></i>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Title</span>
                    </div>
                    <input type="text" id="title_1" name="title" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-tumblr"></i>
                    </span>
                    </div>
                  </div>
                </div>

                <div class="form-group form-actions">
                   <button type="button" id="delBtn_1" class="btn btn-danger">Delete</button>
                </div>
                </form>
                </div>
                </div>
                </div>
                </div>



function toggler(divId){  

   var tempId = divId.slice(-1);
   var x = document.getElementById("icon" + tempId);
   var y = document.getElementById("cardHeader" + tempId);
   x.style.display = "none";
   y.style.visibility = "visible";
   $("#delBtn_" + tempId).show();
   $("#" + divId).toggle();

}

Answer 1

To begin with you should place you js code on the head before the body. Afterwards, replace the a tag with button Finally call toggler function on delete button's onclick

<script>
   function hidePlusBtn() {
       $("#plusBtn").hide();
   }

   function toggler(divId) {  
       var tempId = divId.slice(-1);
       var x = document.getElementById("icon" + tempId);
       var y = document.getElementById("cardHeader" + tempId);
       x.style.display = "none";
       y.style.visibility = "visible";
       $("#delBtn_" + tempId).show();
       $("#" + divId).toggle();
   }
</script>  

<div class="col-sm-6">
      ...
     <button 
            id="plusBtn" 
            class="btn btn-info btn-lg" 
            onclick="toggler('myContent_1');">
              <span 
                  class="glyphicon glyphicon-plus" 
                  id=icon1  
                  onclick="toggler('myContent_1');">
              </span> Plus 
    </button>
     ...
     <button 
          type="button" 
          id="delBtn_1" 
          class="btn btn-danger" 
          onclick="toggler('myContent_1'); hidePlusBtn()">Delete
     </button>
  ...
</div>

Updated Demo: https://jsfiddle.net/1s390orm/