1

This works, but the moment I add Bootstrap 3, (which I need to as it's required in an existing project) it no longer fades in and out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style type="text/css">
    .flashcard
    {
        opacity: 1;
        transition: opacity 2s;
    }

    .flashcard.hidden
    {
        opacity: 0;
    }    
    </style>
    
    <script>
    document.addEventListener('DOMContentLoaded', (event) =>
    {
        var d = document.getElementById('code-yes-text');
        d.classList.add("hidden");

        document.getElementById('code-yes').addEventListener("change", function()
        {
            if (this.checked && d.classList.contains("hidden"))
            {
                document.getElementById('code-yes-text').classList.toggle('hidden');                
            }
        });
        document.getElementById('code-no').addEventListener("change", function()
        {
            if (this.checked && !d.classList.contains("hidden"))
            {
                document.getElementById('code-yes-text').classList.toggle('hidden');                
            }
        });
    });        
    </script>
</head>
<body>    

<div class="radio">
    <label>
        <input type="radio" name="code" id="code-yes" />
        <span>Yes</span>
    </label>
</div>

<div id="code-yes-text" class="flashcard hidden">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam quibusdam suscipit culpa voluptatem nulla. Rerum explicabo in quo commodi ad laudantium nam ratione consectetur beatae, sint dolore molestias assumenda soluta.
</div>            

<div class="radio">
    <label>
        <input type="radio" name="code" id="code-no" />
        <span>No</span>
    </label>
</div>            
    
</body>
</html>
anjanesh
  • 3,771
  • 7
  • 44
  • 58
  • Looks like certain Bootstrap styles are overriding your `.flashcard` class and its transitions. As you might know a single class name (e.g. `.flashcard`) can be relatively low in CSS specificity hierarchy, and can easily be superseded by more specific CSS selectors. Bootstrap styles often involve multiple selectors, which can have unexpected specificity override. Perhaps [this SO answer](https://stackoverflow.com/a/27704409/7216508) might be helpful. – Bumhan Yu Mar 03 '22 at 14:53

0 Answers0