Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Using Visible inside Hidden?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #205005
    bevels
    Participant

    Hey all.. long time ‘Css Tricks’ stalker, but this is my first post, so Hello! is in order I guess.

    My question:

    Is it valid/acceptable to make some content visible from inside a hidden div??? Eg…

    <div class="sneaky">You don't know I'm here <span class="ntw">Only what I want you to see</span></div>

    .sneaky {visibility:hidden;}
    .ntw {visibility:visible;}

    So effectively the visibility:visible rule applied to the span is ‘overriding’ the initial visibility:hidden placed on the div it’s contained in.

    My initial tests work exactly as intended, but there’s just something about it that doesn’t seem legit? Any clever cookies know if this will work across all browsers?

    B.

    P.s. Thanks for having me, massive Css Tricks fan here. I can’t begin to tell you how much it’s benefited me over the years.

    #205008
    Paulie_D
    Member

    My initial tests work exactly as intended, but there’s just something about it that doesn’t seem legit? Any clever cookies know if this will work across all browsers?

    Yep. Absolutely works cross browser.

    Is it valid/acceptable to make some content visible from inside a hidden div???

    Well yes…but it depends on why you feel the need to hide the content.

    Remember, the browser might hide the content but the space reserved for it is still there so you will have to deal with that. It’s not hard (font-size:0 for instance).

    #205019
    bevels
    Participant

    Thanks for chiming in Paulie_D. Glad to know it’s “legitimate” and not a dirty hack that’s conning some browsers to show the nested span.

    The usage is kind of complicated (hence the odd approach). In case you’re curious… I’m using a jQuery masonry plugin for an image gallery, appending the image name as a button to each image, which when clicked adds the name of the image to a form field (still with me) The span is inside the appended file name, which is the only thing I want visible as the “button”, however when clicked I want the entire filename that is appended to be added to the form field.

    Yeah I’ve just read that back and understand it’s probably gobbledy goop without a little more context, I’m sure you won’t lose any sleep over it! Ha ha.

    Thanks again for the input Paulie_D, I appreciate it.

    B.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.