replace a content with another using onclick

Question

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 21, 2016 at 6:12

Sathish

2,4601 gold badge16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohan Rex · Accepted Answer · 2016-07-21 06:12:20Z

0

Its very simple and you code is working for me only.

<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()">    
    <b>Join Us</b>
</a>
<a href="#" onClick="$('#login-dp').show(); $('#signup-dp').hide()">
    <b>Login</b>
</a>
<ul id="signup-dp" class="dropdown-menu">
    // signup data Inside this part
</ul>
<ul id="login-dp" class="dropdown-menu">
    // login data Inside this part
</ul>

Please follow this link . JSfiddle

answered Jul 21, 2016 at 6:12

Mohan Rex

1,6842 gold badges17 silver badges22 bronze badges

Comments

Maths RkBala · Accepted Answer · 2016-07-21 06:13:29Z

0

Onclick jQuery is not working, So user Javascript code

New here ? <a href="#" onclick='document.getElementById("login-dp").style.display = "none";document.getElementById("signup-dp").style.display = "visible";'><b>Join Us</b></a>

answered Jul 21, 2016 at 6:13

Maths RkBala

2,1953 gold badges20 silver badges23 bronze badges

Comments

Faraz Sh. · Accepted Answer · 2016-07-21 06:18:26Z

0

Put the new hidden element somewhere before your existing element. unless you write your jQuery code in $(document).ready(); in a separate file, or internal.

answered Jul 21, 2016 at 6:18

Faraz Sh.

3772 silver badges8 bronze badges

Comments

Rahul Patel · Accepted Answer · 2016-07-21 06:24:00Z

0

Your code is correct. But please check have you included jquery file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

This jquery should be included before the jquery code you have written.

Put following jquery code to make signup div initially hidden.

<script type="text/javascript">
    $(document).ready(function(){
        $("#signup-dp").hide();
    }); 
</script>

edited Jul 21, 2016 at 6:24

answered Jul 21, 2016 at 6:12

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

Comments

Haresh Vidja · Accepted Answer · 2016-07-21 06:24:24Z

0

First of all, for make good programming habit you have to bind click event instead of write javascript code inside of tag onClick attribute.

<a href="#" id="btn_join_us"><b>Join Us</b></a>

In your javascript code (try to write code in other js file instead of inline code in HTML page.)

$(document).ready(function(){
    $("#btn_join_us").click(function(e){
        e.preventDefault();
        $('#login-dp').hide(); 
        $('#signup-dp').show();
        return false;
    });
});

This kind of code make some secure event binding. otherwise anyone can make change your code from inspect element and execute this.

answered Jul 21, 2016 at 6:24

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

1 Comment

user6390829 Over a year ago

thanks for the tip regarding security, will surely keep that in mind

Collectives™ on Stack Overflow

replace a content with another using onclick

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related