jQuery show function

Question

 <scrpit>
    $(document).ready(function(){
            $("#viewDetails").on('click', function(){
                $('#content').show(2000);
            });     
        });
</script>

This is the navbar link and the id present in it

<li class="nav-item"><a href="viewSchedule.php" class="nav-link" id="viewDetails">Trainings</a></li><div id="content">/*body I needed*/</div>

In this div tag, all the body of the page is present. This is the jQuery code I've tried but it didn't work. In the following image "Training" is the link to click and when I click the body should show in 3sec. By using PHP I imported the navbar using require once function. I checked in browser inspection but It's working fine and the script was not working and I even tried with an alert window that also working fine but I'm not getting the result

Here is the image that shows my page where the link is present

In your code is `` a copy error or is it incorrect in the original code? — Nigel Ren, May 20 '20 at 06:20
Do you actually need "href="viewSchedule.php"". If you click, then the call would go this page without seeing what the script did, right ? — Mukesh Keshu, May 20 '20 at 06:30
yeah, when I click `href=viewSchedule.php` then my script has to run and give me that show animation @MukeshKeshu — Sateesh Gollapudi, May 20 '20 at 06:32
I think the problem is that you have viewSchedule.php in the href attribute and when the user clicks on the menu item the browser follows the link. You can prevent this behavior (following the link) with `Event.preventDefault()` https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault — András, May 20 '20 at 06:33
The page will be redirected before the content becomes visible. — András, May 20 '20 at 06:37

Mukesh Keshu · Accepted Answer · 2020-05-20T06:45:54.907

1

You have an href associated with <a>. So when you click on it, that page gets loaded before the content is shown.First change <scrpit> to <script>. Then remove href attribute and add hidden to id="content" to make it hidden on load. See below -

<li class="nav-item"><a  class="nav-link" id="viewDetails">Trainings</a></li><div id="content" hidden>/*body I needed*/</div>

See demo here

edited May 20 '20 at 06:45

answered May 20 '20 at 06:34

Mukesh Keshu

467
2
13

Is there any CSS to add? – Sateesh Gollapudi May 20 '20 at 06:43
The functionality will work without any css. Add your own css if you need some styling. – Mukesh Keshu May 20 '20 at 06:43
As you said to remove `href` then how could I get my page without link? – Sateesh Gollapudi May 20 '20 at 06:50
See this - https://stackoverflow.com/questions/1346043/html-anchor-link-href-and-onclick-both – Mukesh Keshu May 20 '20 at 06:57
ThankYou Mr. Mukesh I tried everything but it's not working for me, thank you for your valuable time. If you have time can we get personal taking there I can explain to you my problem clearly `Email: gollapudi.smiles@gmail.com` – Sateesh Gollapudi May 20 '20 at 07:18
Mukesh Bro pls contact me: +91 7032285906 – Sateesh Gollapudi May 20 '20 at 07:42

score 1 · Answer 2 · answered May 20 '20 at 06:38

1

You miss spelled "Script" in your code.

It should be "<script>"

answered May 20 '20 at 06:38

Anil Purswani

1,857
6
35
63

jQuery show function

2 Answers2