Today I am facing a challenge: I need the text below to change when I click on one of these icons: https://i.sstatic.net/28xEF.png Luckily, it works with the following code:
CSS
.games-text {
background-color: $color-primary;
& p {
max-width: 90rem;
text-align: center;
margin: 0 auto;
padding: 3rem 0;
font-size: 1.7rem;
color: #D88087;
}
}
JS
$(document).ready(function () {
$('.games__game svg').click(function(e) {
$('.games__game.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
});
$(document).ready(function(){
$("#game1 svg").click(function(){
$('.games-text').html('<p>Cash games, also sometimes referred to as ring games or live action games, are poker games played with "real" chips and money at stake, often with no predetermined end time, with players able to enter and leave as they see fit. In contrast, a poker tournament is played with tournament chips worth nothing outside the tournament, with a definite end condition (usually, only one player left), and a specific roster of competitors.</p>');
});
});
$(document).ready(function(){
$("#game2 svg").click(function(){
$('.games-text').html('<p>In a standard tournament format all players enter for the same amount of money which also carries a fee which the entity running the tournament keeps. As an example, “Casino Pokerology” might offer a no limit hold’em tournament that has a $50 entry cost plus a $5 fee to play. Once you post the $55, $50 of which goes into the prize pool and the other $5 is the fee to run the tournament, you may get $2,000 in non negotiable tournament chips. The blinds might start at $10 and $20 and escalate every twenty minutes. The continual escalation of the blinds forces the players to “gamble” more versus just playing conservatively and waiting for premium cards. This format is how the attrition of players whittles the number of starting players down to the eventual winners.</p>');
});
});
$(document).ready(function(){
$("#game3 svg").click(function(){
$('.games-text').html('<p>This type of tournament was started by the online poker sites but has now spread into the bricks and mortar cardrooms. They are played both one table as well as multiple tables. The name comes from the fact that to sign up all you need do is sit down. When the players in the tournament have all sat down – it “goes”. As an example, you enter an online poker site and select a one table sit & go (SnG), pay your entry fee, sit down and wait. The tournament starts when the last player who will complete the table sits down. These type of tournaments on the internet have become extremely popular, so much so that sometimes you need to be very “quick to click” in order to get in before the table fills up. One table sit & goes normally pay the top three finishers.</p>');
});
});
$(document).ready(function(){
$("#game4 svg").click(function(){
$('.games-text').html('<p>SPINS are three-handed Sit & Go tournaments where a multiplier between 2 and 240,000 randomly determines the size of the prizepool before the first card is dealt, so you could turn a $5 buy-in into a massive top prize of $1M in our SPINS $1M game.</p>');
});
});
The issue here is that the height of the red container below depends on the text length. When there is more text, the height increases instantly. While this is acceptable, I would like to animate this height change somehow, yet I am unsure how to accomplish that. Can anyone provide assistance?