CODEWITHSUNDEEP
javascriptjqueryhtmlcssdurandal
user5260143
user5260143

Reputation: 1096

change visibility of span using jquery

I work on a durandal project. I have span and button elements in html. The span elements are hidden and I want to show these on button click. My problem is that when I hide the span from html- it can't show it from javascript. I saw this question (on link change visibility of label tag using jquery) and I tried all of the answers- nothing helped me.

(I tried using: in html:

<span id="mySpan" hidden = "hidden">aaa</span>

or:

<span id="mySpan" style= "visibility:collapse">aaa</span>

or:

<span id="mySpan" style= "display:none">aaa</span>

in javascript:

$("#mySpan").show();

or:

$("#mySpan").css('visibility', 'visible');

I tried all of the optional combinations )

Note: I want you to know that when I'm not hiding the span from the HTML, and try using toggle(), hide(), show() - it works well.

Example that does not work:

on html page:

    <span id="mySpan" hidden = "hidden">aaa</span>

on javascript page:

    $("#mySpan").show();

Upvotes: 2

Views: 112150

Answers (3)

alcoceba
alcoceba

Reputation: 423

Seems to be an error in "diaplay"? Try to change:

<span id="mySpan" style="diaplay:none"/>

to:

<span id="mySpan" style="display:none"/>

Upvotes: -1

Sverri M. Olsen
Sverri M. Olsen

Reputation: 13263

Well, your code is all wrong.

  • The id attribute should only be used once per page. It is meant to be unique so that you can refer to it as a single point in the document. You should change it to class="mySpan" and then select them using $(".mySpan").

  • visible:collapse is invalid CSS. You probably meant to use visibility, yes?

  • diaplay:none is also invalid CSS. Probably a typo of display, yes?

  • There is a hidden attribute in the newest HTML spec (usually called HTML5). I am not sure if you are aware of it; if you are, and you are trying to use it, then you should put the following in your CSS file so that it works in browsers that have not yet implemented it:

    *[hidden] {
    display: none;
}

Follow-up:

Okay, you want to be able to toggle a span on and off by clicking on a button. This will do it:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="myButton">Show/hide the span</button><br>
<span id="mySpan" style="display:none">This is a span with some text in it</span>
<script>
$(function() {
    $("#myButton").click(function() {
        $("#mySpan").toggle();
    });
});
</script>

Upvotes: 6

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Your HTML is not OK!

Remember, spans are closed <span></span> this way, and not the way you are closing them! That way, only self-closing elements such as: input, img etc are closed!

Try to write this: 

<span id="mySpan">Some text!</span>

The CSS would be: 

#mySpan {
  display: none; // you're using diaplay!
}

Now using jQuery either use this:

$('#mySpan').show()

Or this: 

$('#mySpan').css('display', 'block');

Upvotes: 21

Related Questions