Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Radio Button Toggle</title>
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- <style>
- /* Add this CSS to style the content */
- #block-feb1fe9e0146872ae9f7, #block-cf109b682a1232958eb2 {
- font-weight: bold;
- color: green;
- }
- /* Add this CSS to stack the radio buttons vertically */
- .radio-container {
- display: flex;
- align-items: center;
- margin-bottom: 10px;
- }
- .niceradio {
- margin-right: 10px;
- }
- </style>
- </head>
- <body>
- <h4 id="title-text">Pick a day to get notified. You can sign up for both forms.</h1>
- <div class="radio-container">
- <input type="radio" name="blockToggle" id="radio1" class="niceradio">
- <label for="radio1">Sunday Sessions</label>
- </div>
- <div class="radio-container">
- <input type="radio" name="blockToggle" id="radio2" class="niceradio">
- <label for="radio2">Wednesday Sessions</label>
- </div>
- <div id="#block-feb1fe9e0146872ae9f7">
- <!-- Content for Block A -->
- </div>
- <div id="#block-cf109b682a1232958eb2">
- <!-- Content for Block B -->
- </div>
- <script>
- $(document).ready(function() {
- $("#radio1").click(function() {
- // Bring #block-feb1fe9e0146872ae9f7 to the front and hide #block-cf109b682a1232958eb2
- $("div#block-feb1fe9e0146872ae9f7").css("z-index", "2");
- $("div#block-cf109b682a1232958eb2").css("z-index", "1");
- $("div#block-feb1fe9e0146872ae9f7").show();
- $("div#block-cf109b682a1232958eb2").hide();
- // Make #block-feb1fe9e0146872ae9f7 clickable
- $("div#block-feb1fe9e0146872ae9f7").css("pointer-events", "auto");
- // Make #block-cf109b682a1232958eb2 not clickable
- $("div#block-cf109b682a1232958eb2").hide();
- });
- $("#radio2").click(function() {
- // Bring #block-cf109b682a1232958eb2 to the front and hide #block-feb1fe9e0146872ae9f7
- $("div#block-cf109b682a1232958eb2").css("z-index", "2");
- $("div#block-feb1fe9e0146872ae9f7").css("z-index", "1");
- $("div#block-cf109b682a1232958eb2").show();
- // Make #block-cf109b682a1232958eb2 clickable
- $("div#block-cf109b682a1232958eb2").css("pointer-events", "auto");
- // Make #block-feb1fe9e0146872ae9f7 not clickable
- $("div#block-feb1fe9e0146872ae9f7").hide();
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement