CODEWITHSUNDEEP
htmlcss
Vaibhav Jain
Vaibhav Jain

Reputation: 5507

Div mouse click to display not working

I want to hide div until user clicks it then it should be displayed.

HTML

<div class="cTsdiv"><a href="/{{ i.couponStoreURL }}/#{{ i.id }}">
<span id="couponCode" style="">{{ i.couponCode }}</span></a>
<span class="cTs">Click to see the code</span></div><br><br>

CSS

.cTsdiv {
    height:50px;
    width: 175px;
    position: relative;
    display:inline-block;
    border:1px dashed;
    padding:5px;
    margin:5px;
    background:#EE4000;
    color:white;
    height:20px;
    text-align:center;
}

.cTs {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    height:30px;
    width: 185px;
    line-height:4em;
    background: black;
    visibility: visible;
    position: absolute;
    -webkit-transition: visibility opacity 0.1s;
}

.cTsdiv:hover .cTs {
    opacity:1;
    color:white;
    visibility: hidden;
}

.cTsdiv a {
    font-color:white;
    text-decoration:none;
}

Upvotes: 0

Views: 133

Answers (3)

Roy Sonasish
Roy Sonasish

Reputation: 4609

try this

$(document).ready(function(){
$('.cTsdiv a').click(function() {
    $(this).next('.cTs').fadeIn();
    return false;
});
});

also I have edited some of your css

jsfiddle File

Upvotes: 0

RbG
RbG

Reputation: 3213

one solution to your question may be like this

.cTsdiv:hover .cTs {
opacity:1;
color:white;
display:none;
}
.cTsdiv:active .cTs {
opacity:1;
color:white;
display:block;
}

Upvotes: 0

ninty9notout
ninty9notout

Reputation: 1116

Based on your CSS/HTML, you need some Javascript involved.

$('.cTs').on("click", function() {
    $(this).css("opacity", 0).delay(100).queue(function() {
        $(this).css("display", "none");
    });
});

The delay/queue are there to make the script wait till your animation is finished before the span is hidden. There's a proper way to do this, but this will do for now.

Something like this? http://jsfiddle.net/ninty9notout/3EMv2/

Upvotes: 2

Related Questions