JSFiddle - React, Tailwind, and code Playground

by Karan1412

HTML

<html>
        <head>
        <title>sibling</title>
        </head>
        <body>
        <div id="mainDiv">
        <div id="targetDiv">This is div element inside another div.</div>
        <p>This is paragraph1 inside div element. It is sibling to div with id = "targetDiv" </p>
        <span>This is span element.</span><br>
        <em>This is emphasize element.<em>
        </div>
        <input type="button" id="sibling" value="Siblings" />
        <input type="button" id="siblingSelector" Value="Siblings with Selector" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

JavaScript

$(document).ready(function () {
                var css = {
                    'color': 'Red',
                    'text-decoration': 'underline',
                    'font-size': '30px'
                }
                $("#sibling").click(function () {
                    $("#targetDiv").siblings().css(css);
                });
                $("#siblingSelector").click(function () {
                    $("#targetDiv").siblings("p").css(css);
                });
            });