Hide Text

[madness69]

hello there, i looked in a tutorial of a functionality in javsscript, if you take a look at the link above youll see:

 

http://interestingwebs.blogspot.pt/2011/05/hide-or-show-div-element.html

 

In this link "SHOW/HIDE"

 

When i click it shows the text above, but i liked to when i click the link the "SHOW/HIDE" text disappear, how can i do it?

 

Best regards

[madness69]

Sorry for the question, what i mean is

"

hello there, i looked in a tutorial of a functionality in javsscript, if you take a look at the link above youll see:

 

http://interestingwe...iv-element.html

 

In this link "SHOW/HIDE" how can i make the text disappear, when i click on it??

 

Best regards

[codefossa]

Example: http://xaotique.no-ip.org/tmp/8

 

If you want it to show without Javascript enabled as well, you would hide them with JS. So, I used fieldsets and set the default legend, but changed it to a toggle button with JS to hide/show the div inside.

 

<fieldset class="spoiler">
   <legend>Spoiler</legend>
   <div>
       The text is showing!
   </div>
</fieldset>

<fieldset class="spoiler">
   <legend>Spoiler</legend>
   <div>
       This is another one!
   </div>
</fieldset>

 

$(document).ready(function()
{
   $(".spoiler").each(function()
   {
       var toggle = $(document.createElement("a"))
           .attr("href", "#")
           .html("Show / Hide")
           .css({ "text-decoration": "none", color: "#000077", "font-size": "12px" });

       $(this).find("legend").html(toggle);
       $(this).find("div:first").hide();
       $(this).css("display", "inline");
   });

   $(".spoiler legend a").click(function(e)
   {
       e.preventDefault();

       $(this).parent().parent().find("div:first").fadeToggle(500);

       return false;
   });
});

[madness69]

But still the same, when i click in the link "Show / Hide" the text aboxe appears but the link "Show / Hide" is still there, i want him to disappear once the text above appears.

[codefossa]

Just hide the legend then. It will then become a box. If that's the case, you may want to just replace the whole thing, but I don't know what you're really doing.

 

In my example, you would just add $(this).parent().hide(); to the click function.

 

The example has been updated with this.

[madness69]

Just hide the legend then. It will then become a box. If that's the case, you may want to just replace the whole thing, but I don't know what you're really doing.

 

In my example, you would just add $(this).parent().hide(); to the click function.

 

The example has been updated with this.

 

Where do i add exactlly the add $(this).parent().hide(); to the click function in your example? Sorry for the noob question, i new in javascript.

[codefossa]

The click function is triggered when you click the link. It's located at the fieldset > legend > a tag

 

When you click that, you're wanting to hide the legend, so you have to go up one level to the parent and hide. The a tag's parent is the legend tag, so you want to use the hide function on that.

 

The click function should be obvious. .click(function() { /* this is inside the triggered function */ });

Edited October 22, 2012 by Kira

[madness69]

It didnt work i putted inside and gives a error:

 

 $(".spoiler legend a").click(function(e)
    {
               add $(this).parent().hide();
		    e.preventDefault();

		    $(this).parent().parent().find("div:first").fadeToggle(500);

		    return false;
    });
});

[codefossa]

You don't put "add" as part of it. You just add the $(this).parent().hide(); to it. It would also go after you prevent the default action.

Edited October 22, 2012 by Kira