Jump to content

Hide Text


madness69

Recommended Posts

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

Link to comment
https://forums.phpfreaks.com/topic/269768-hide-text/
Share on other sites

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

Link to comment
https://forums.phpfreaks.com/topic/269768-hide-text/#findComment-1386920
Share on other sites

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;
   });
});

Link to comment
https://forums.phpfreaks.com/topic/269768-hide-text/#findComment-1386922
Share on other sites

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.

Link to comment
https://forums.phpfreaks.com/topic/269768-hide-text/#findComment-1386925
Share on other sites

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.

Link to comment
https://forums.phpfreaks.com/topic/269768-hide-text/#findComment-1386949
Share on other sites

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 */ });

Link to comment
https://forums.phpfreaks.com/topic/269768-hide-text/#findComment-1386953
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.