Home/ Questions/Q 3606780
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T21:17:33+00:00

I have a PHP/PostgreSQL/Oracle-script which displays links as tags, which can be clicked to

  • 0

I have a PHP/PostgreSQL/Oracle-script which displays links as “tags”, which can be clicked to display only the database records matching that “tag”. And then I have an “X” near every “tag”, so that the user can hide uninteresting “tags”:

alt text

I would like to add a fade out effect to the both elements (the “tag” and the “X”) – when the “X” has been clicked. So I am trying:

<!DOCTYPE html>
<html>
<head>
<style>
a.hide {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.hide:hover {
        background-color: #e7540c;
        color: #E0EAF1;
        border-bottom: 1px solid #A33B08;
        border-right: 1px solid #A33B08;
        text-decoration: none;
}

a.filter {
        color:#3E6D8E;
        background-color: #E0EAF1;
        border-bottom: 1px solid #3E6D8E;
        border-right: 1px solid #7F9FB6;
        padding: 3px 4px 3px 4px;
        margin: 2px 2px 2px 0;
        text-decoration: none;
        font-size: 90%;
        line-height: 2.4;
        white-space: nowrap;
}

a.filter:hover {
        background-color: #3E6D8E;
        color: #E0EAF1;
        border-bottom: 1px solid #37607D;
        border-right: 1px solid #37607D;
        text-decoration: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
$(document).ready(function () {
        $('a.hide').click(function () {
                $(this).fadeOut('fast');
        });
});
</script>
</head>
<body>
<p>Please click on
<a class="filter" href="?filter=1">Tag 1</a><a
class="hide" href="?hide=1">X</a></p>

<p>Please click on
<a class="filter" href="?filter=2">Tag 2</a><a
class="hide" href="?hide=2">X</a></p>
</body>
</html>

However I have 2 problems:

  1. When my PHP-script is quick, then I don’t see any fade effect at all. (This is a minor problem, because my real script is far from being quick 🙂 )
  2. I only manage to fade out the clicked “X”. How can I fade out the “tag” on the left from it? (And I can’t use #id here, because my real script has hundreds of such “tags”)

Please push the jQuery newbie in correct direction!
Alex

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use .prev() to get the previous sibling, then .andSelf() to again include the X itself, like this:

    $(document).ready(function () {
  $('a.hide').click(function () {
    $(this).prev().andSelf().fadeOut('fast');
  });
});

    If you want to fade out the “Please click on…” as well, fade out the <p> by climbing up to it with .closest() like this:

    $(document).ready(function () {
  $('a.hide').click(function () {
    $(this).closest('p').fadeOut('fast');
  });
});
    • 0