javascript - DataTables search bar appear on click -

i using datatables in small jquery app making. have search bar want show if click on search icon. in order make search bar disappear "bfilter": true, should set false. fiddle have created , have far.

the following tried not work.

<script>     (document).ready( function () {       $('#example').datatable( {         "bpaginate": false,         "bfilter": false,        "olanguage": { "ssearch": "" }           } );        $('.datatables_filter input').attr("placeholder", "enter seach terms here");     } );      $('#search').click(function(e) {          $('#example').datatable( {          "bfilter": true           } );          }); </script> 

in set bfilter false make not appear , try set true upon clicking search icon. can please help? reason search icon css got messed idk why. please advice.

this hide filter input box , show when click search icon.

css:

#example_filter {     display: none; } 

js:

$('#search').click(function(e) {       $('#example_filter').show(); }); 

demo: jsfiddle

alternative, can use .toggle() second click hide box again.

$('#search').click(function(e) {       $('#example_filter').toggle(); });