Leave an Hide(hidden) element with javascript

Question

I have an element with the ID="not1" which is a link to news titles inserted being created dynamically with the respective news of each title class=" col-Md-12" as shown below.

<div id="noticia">
     <div id="not1"><a href="<?php $noticia['idp_postjauport'] ?>"><?php print $noticia['tit_postjauport'] ?></a></div>
     <div class="col-md-12" id="col-md-12">
     <?php print $noticia['pos_postjauport'] ?>
     </div>

     </div> 
     </p>

have a javascript that should show the content of my link only when I click on it, javascript below.

    <script type="text/jscript">

$("#not1").click(function(event){
      event.preventDefault();

      $("#col-md-12").hide('slow');

      $("#col-md-12").show(3000);
      event.preventDefault();
    });
});

    </script>

What is happening is that my html page is bringing this element open, but if I click the link it closes and opens again...I don’t know how to fix this small problem

Answer 1

You need to add a statement in javascript to hide the content of the link as soon as the page starts. As you are using jQuery, this can be done with the following function:

$(document).ready({
   $("#col-md-12").hide();
});

Answer 2

You must have CSS that hides that link. So it’s hidden the moment it’s created.

You can have CSS in the file .css page

#col-md-12 {display: none;}

or inline at the time of creating the link. If you create the link with Javascript just do el.style.display = 'none'; before to be included in the DOM.