2

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();
Palle Due
  • 5,929
  • 4
  • 17
  • 32
user5260143
  • 1,048
  • 2
  • 12
  • 36
  • 1
    Fix the `style` values first (`visible` should be `visibility`, and `diaplay` should be `display`). Also, `id`s should only be used once. Change them to `class` instead and select them using `$(".mySpan")`. – Sverri M. Olsen Dec 22 '13 at 11:03
  • Your HTML is invalid (even assuming that you are showing three different examples (since `id` has to be unique), the end tag for a span element is mandatory, the hidden attributes doesn't exist, `display` is not spelt `diaplay`, there is not `visible` property) and provide no content or styling to tell if a span is visible or not. We also can't see how (and more importantly *when*) you are running the JS. **Please provide a *complete* reduced test case that actually demonstrates the problem.** – Quentin Dec 22 '13 at 11:05
  • ho... it is only writing mistakes! you have to understand by yourselves that in my project I write it correctly. and also, about the same ID for some elements, It is one element, I wrote you that they are all of the syntax that I tried, and not really some line in my code. please, don't vote down before you read the question well. I will be happy if you will return to me my reputation. – user5260143 Dec 22 '13 at 11:17
  • 1
    You have to understand that **we don't know what you have actually written**. The code you have provided is so awful, we can't even make a confident guess! As requested, please show us a real test case that actually shows the problem. – Quentin Dec 22 '13 at 11:19
  • Its working fine for me, did you check any console log error which is preventing js to execute http://jsfiddle.net/8RZM8/ – Raunak Kathuria Dec 22 '13 at 11:24
  • There is no content in any of those spans (which are still invalid HTML). How can you tell if they are visible or not? (Again: Please provide a **complete** test case that **demonstrates the problem**) – Quentin Dec 22 '13 at 11:26
  • Another edit, and again - we can't tell how or when the JS is running. Please provide a **complete** test case. – Quentin Dec 22 '13 at 11:31
  • Doing that doesn't reproduce your problem! This is why you need to provide a **complete** test case. – Quentin Dec 22 '13 at 11:33
  • @user2783091 - Are you trying to say that by asking bad questions with missing information you stop people writing bad answers on Stackoverflow? That's nonsense, you encourage them as people answer based on guesswork. – Quentin Dec 22 '13 at 11:42
  • No, I mean I tell them about all the options I tried, so they know that these options do not work and won't write answers that not works, as what happen at link change visibility of label tag using jquery – user5260143 Dec 22 '13 at 11:46
  • The problem is that you are only providing vague hints about what you have tried and not anything testable. – Quentin Dec 22 '13 at 11:47
  • Quentin, can you tell me how did you delete things? I wan't to remove all. – user5260143 Dec 22 '13 at 12:24
  • 1
    Possible duplicate of [How to change css display none or block property using Jquery?](http://stackoverflow.com/questions/3582619/how-to-change-css-display-none-or-block-property-using-jquery) – krummens Feb 17 '16 at 01:20

3 Answers3

21

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');
Afzaal Ahmad Zeeshan
  • 15,669
  • 12
  • 55
  • 103
6

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>
Sverri M. Olsen
  • 13,055
  • 3
  • 36
  • 52
-1

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

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

to:

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

alcoceba
  • 421
  • 4
  • 18
  • The question says that the problem is revealing the span using JS (i.e. that it is remaining hidden). This is clearly a problem with the question and not the code that the question is asking about. – Quentin Dec 22 '13 at 11:07