sammy001 sammy001 - 4 months ago 11
Javascript Question

replace a content with another using onclick

I am using one of the bootstrap snippet for login dropdown box in the login box there is a link for

Join Us
I wanted that when i click on Join Us, the content within the box should get replaced by another box that contains login credentials

I modified the following code

New here ? <a href="#"><b>Join Us</b></a>


with the code below

New here ? <a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()"><b>Join Us</b></a>


and created another content that had id
signup-dp
like this

<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>


Now when i click on the Join Us link the url of the page gets changed i.e #signup in the end of the url, but the content does not get displayed,
can anyone please tell how to do so

Answer

Please check jquery included or not.

Use return false like below

<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show(); return false;"><b>Join Us</b></a>

#signup-dp{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show(); return false;"><b>Join Us</b></a>
<div id="login-dp">login-dp</div>
<div id="signup-dp">signup-dp</div>