Open multiple Div and hide By Jquery and CSS

Open multiple Div and hide By Jquery and CSS

Copy this javascript and pest under header tag

<script>
var control = 1;
function countcontrol_product(id)
{
    var mytable = document.getElementById(id);
    return mytable.childNodes.length;
   
}

function add_more_product_box(parent_id, child_name, child_name1, child_name2, child_id, child_id1, child_id2)
{     
    if(countcontrol_product(parent_id)<14)
    {
      control++;     
      var myTable=document.getElementById(parent_id);
      var oDiv, oInput;
      oDiv = document.createElement('div');
      oDiv.setAttribute('id','add'+control);
      oDiv.style.margin="0 0 10px 0";
     
      myTable.appendChild(oDiv);
   
     /* oInput = document.createElement('input');
      oInput.setAttribute('type', 'file');
      oInput.setAttribute('name', child_name3);
      oInput.setAttribute('id', child_id3);
      oInput.setAttribute('placeholder', 'Addon image');
      oInput.style.margin = '0 10px 0 0';
      oDiv.appendChild(oInput);     */
     
      oInput = document.createElement('input');
      oInput.setAttribute('type', 'text');
      oInput.setAttribute('name', child_name);
      oInput.setAttribute('id', child_id);
      oInput.setAttribute('placeholder', 'Add Product');
      oInput.style.margin = '0 10px 0 0';
      oDiv.appendChild(oInput);
     
      oInput = document.createElement('input');
      oInput.setAttribute('type', 'text');
      oInput.setAttribute('name', child_name1);
      oInput.setAttribute('id', child_id1);
      oInput.setAttribute('placeholder', 'Add price');
      oInput.style.margin = '0 10px 0 0';
      oDiv.appendChild(oInput);
     
      oInput = document.createElement('input');
      oInput.setAttribute('type', 'text');
      oInput.setAttribute('name', child_name2);
      oInput.setAttribute('id', child_id2);
      oInput.setAttribute('placeholder', 'Add size');
      oInput.style.margin = '0 10px 0 0';
      oDiv.appendChild(oInput);
     
      oInput = document.createElement('a');
      oInput.setAttribute('href', 'javascript:;');
      oInput.setAttribute('class', 'remove');
      oInput.setAttribute('onclick', 'removediv(this.title)');
      oInput.setAttribute('title', 'add'+control);
      oInput.innerHTML= '-';
      oInput.style.margin = '0 10px 0 0';
      oDiv.appendChild(oInput);
    }
}

var child_id = 1;
function child(id)
{
        return id+child_id++;
}
var child_id1 = 1;
function child1(id)
{
        return id+child_id1++;
}   
var child_id2 = 1;
function child2(id)
{
        return id+child_id2++;
}   

var child_id3 = 1;
function child3(id)
{
        return id+child_id3++;
}       

function removediv(id)
{       
    var elem = document.getElementById(id);
    elem.parentNode.removeChild(elem);
}
</script>

After this script use this style and put under header tag

Fore More Detail click on Web development Company

<style>
.remove{font-size:20px; text-decoration:none; font-weight:bold; color:#FFFFFF !IMPORTANT; padding:0px 5px; background-color:#990000; border-radius:10px;}
.add{font-size:20px; text-decoration:none; font-weight:bold; color:#FFFFFF !IMPORTANT; padding:0px 5px; background-color:#009900; border-radius:10px;}
</style>


Fore More Detail click on Web development Company


use this html code where you want to show multiple div

<div id="add_more_product">
<p>Add Product </p>
      <div id="add1" style=" margin:0 0 10px 0">
          <input type="text" id="product_Name" name="product_Name[]" placeholder="Add Product" style="margin:0 10px 0 0;"><input type="text" id="price" name="price[]" placeholder="price" style="margin:0 10px 0 0;"><input type="text" id="label" name="label[]" placeholder="size" style="margin:0 10px 0 0;"><a href="javascript:;" class="remove"  onclick="removediv(this.title)" title="add1">-</a>
      </div>
</div>
<a class="add" href="javascript:;" onClick="return add_more_product_box('add_more_product', 'product_Name[]', 'price[]', 'label[]',  child('product_Name'), child1('price'), child2('label'));">+</a>