Why when I try to hide my CSS triangle with jQuery by adding a class does it not work?

Question

I want to hide my CSS triangle which is attached to a div using :before, and I came across this solution to implement: https://stackoverflow.com/a/11354393/998117

However, my jQuery is not working:

$(".contact input[type='submit']").click(function(event) {
    event.preventDefault();
    $(".contact .inner").addClass("hidden");
    ...

(Yes, it does get called.)

This is what my CSS/SASS looks like:

.contact {
    background: #3c6ea5;
    color: #fff;
    display: none;
    height: 500px;

    .hidden:before {
            display: none;
        }

    .inner {
        margin: auto;
        padding-top: 20px;
        position: relative;
        width: 400px;

        &:before {
            border: solid;
            border-color: #3c6ea5 transparent;
            border-width: 14px 16px 0 16px;
            bottom: -107px;
            content: "";
            display: block;
            position: absolute;
            right: -50px;
        }

        .hidden:before {
            display: none;
        }
    }
    ...

Why is it not hiding it? What am I doing wrong?

That selector is not right...`&.hidden:before` – elclanrs Sep 21 '13 at 20:50 — elclanrs, Sep 21 '13 at 20:50

Chase · Accepted Answer · 2013-09-30T00:31:15.973

6

Your Sass is off just a little bit, should be:

.inner {

    &.hidden:before {
        display: none;
    }
}

Notice the & before hidden

edited Sep 30 '13 at 00:31

answered Sep 21 '13 at 20:54

Chase

9,289
5
51
77

score 0 · Answer 2 · edited Mar 19 '20 at 11:24

0

Try below code to solve your problem:

.inner { &:before {     
     .hidden & { display:none;}}}

edited Mar 19 '20 at 11:24

RBT

24,161
21
159
240

answered Mar 19 '20 at 11:17

asif

1
1

Why when I try to hide my CSS triangle with jQuery by adding a class does it not work?

2 Answers2