How to show and hide my contents when I click my icon

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.

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.
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();

}

Your id tag in the following line :<span class="glyphicon glyphicon-plus" id=icon1 onclick="toggler('myContent_1');"></span>is missing the two "" that's a first step — Ivo
the only error I have in jsfiddle is Uncaught ReferenceError: toggler is not defined. If I put the script inline in the HTMl between <script> tags then it works. in your project be careful when javasript is loaded. — Ivo
Your jsfiddle does not work. I created I CodePen to verify your error, but it works. Does the console of the DevTools shows some errors? — Batajus

kboul kboul · Accepted Answer · 2018-09-16T15:20:16

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/

How to show and hide my contents when I click my icon

1 Answers