I have the following code.
What I want is that when pressing the button to display information it shows me the text that I include in the class.lorem
This works in part, because the text is being displayed before displaying the button, what I tried at the time was to include this class to the script that displays the info, like this:
$('.hint .lorem').click(function() {
$(this).toggleClass("show");
});
This didn't work for me.
Is there something I'm doing wrong?
$('.hint').click(function() {
$(this).toggleClass("show");
});
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #E0E5EC;
font-family: 'Montserrat';
}
.lorem {
padding: 2rem;
color: white;
text-align: center;
}
.card {
position: relative;
width: 240px;
height: 180px;
border-radius: 12px;
background-color: #E0E5EC;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}
.card .hint {
position: absolute;
top: -12px;
right: -12px;
width: 32px;
height: 32px;
background: rgb(226, 45, 72);
border-radius: 16px;
transition: all 0.2s ease;
}
.card .hint .icon-info {
position: absolute;
z-index: 1;
top: 0;
right: 0;
display: block;
width: 32px;
height: 32px;
border-radius: 16px;
cursor: pointer;
pointer-events: auto;
}
.card .hint .icon-info:before,
.card .hint .icon-info:after {
content: '';
position: absolute;
width: 2px;
height: 12px;
background: #fff;
border-radius: 2px;
transform-origin: center center;
transition: all 0.25s ease;
}
.card .hint .icon-info:before {
transform: translate(15px, 6px) rotate(0) scale(1, 0.2);
}
.card .hint .icon-info:after {
transform: translate(15px, 12px) rotate(0) scale(1, 0.5);
}
.card .hint.show {
width: calc(100% + 14px);
height: calc(100% + 14px);
}
.card .hint.show .icon-info:before {
transform: translate(15px, 10px) rotate(-45deg);
}
.card .hint.show .icon-info:after {
transform: translate(15px, 10px) rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="hint">
<span class="icon-info"></span>
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br>
Maecenas ornare gravida imperdiet, nascetur ridiculus mus.
</div>
</div>
</div>
You could add: