Hiding and Showing specific text in div, jquery

Question

I am having issues hiding and showing specific text, specifically "picked" and "show_hidden". In this task I must make picked hide and then be able to click on "should" to show the picked again. Any help would be greatly appreciated:)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Coding Tasks</title>

    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
      $("a").click(function() {
        $("#picked").toggle();
       });
      });
      $("a").click(function() {
        $("#show_hidden").toggle();

    });
  </script>
    <style>
        .important {
          font-weight: bold;
          font-size: xx-large;
        }
        .set_colour {
          color: blue;
        }
        .test
        {
            width: 500px;
        }
        div
        {
            padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px; border-top-color: navy; border-right-color: navy; border-bottom-color: navy; border-left-color: navy; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: solid; height:200px;
        }
    </style>

</head>
<body>
<p>Name: George Bob</p>

  <div>
  <p class="test">Test 1: Hide and Show</p>
   <p class="picked">When you click on <a href="#">this</a> all paragraphs of class 'picked' should take 1.5sec and hide</p>
   <p id="show_hidden"><a href="#">Should</a> should not hide and on click should show hidden</p>
   <p class="picked">This should hide as well</p>
  </div>

</body>
</html>

`toggle()`needs a css class name as parameter. Define a css class with `display:none;`and add the name to toggle method. — Reporter, Jun 29 '20 at 15:32
Does this answer your question? [jQuery Toggle Text?](https://stackoverflow.com/questions/2155453/jquery-toggle-text) — Reporter, Jun 29 '20 at 15:36
Very important is to include your in the head tag of your html — Makis Milas, Jun 29 '20 at 16:20
@MakisMilas It is not nessecary, though is the recommended way. — Reporter, Jul 01 '20 at 08:27

score 0 · Answer 1 · answered Jun 29 '20 at 15:41

You seem to have defined you 'picked' elements with a class, yet you selected them using an id.

You should update your selector this way:

$(".picked").toggle(); // select by class, not id

Another issue with your code is that both anchors are selected by the element type (i.e. a). This way there is no way to distinguish between the elements.

You can give them individual id's and then use those to select the appropriate element for showing / hiding other elements.

That is, you should define your anchors in a similar way to this:

<a id="hide-link" href="#">this</a>

and the second one:

<a id="show-link" href="#">Should</a>

Finally, you script should look like this:

$(document).ready(function(){
    $("#hide-link").click(function() {
        $(".picked").hide();
    });

    $("#show-link").click(function() {
        $(".picked").show();
    });
});

Hope this helps.

This makes sense and helps me understand, however when I go to run the new code that you suggested, when I click "this" and "should" nothing happens. Sorry I am a complete noob and probably sound really naieve. — fudgey, Jun 29 '20 at 15:52
Have you updated the HTML part as well? I mentioned you need to add id's to your anchor elements to differentiate between them. — Romi Halasz, Jun 29 '20 at 15:57

score 0 · Accepted Answer · answered Jun 30 '20 at 08:33

Without any changes on posted HTML code:

 $(document).ready(function(){
    $(".picked").click(function()
    {
        $(".picked").each(function()
        {
            $(this).hide();
        });
    });

    $("#show_hidden").click(function() {
        $(".picked").each(function()
        {
            $(this).show();
        });
    });
});

Hiding and Showing specific text in div, jquery

2 Answers2