How to toggle classes of iframe in javascript?-CodePudding

This is the iframe (a chatbot html page) , which I am calling in another HTML project. So, i need to toggle the classes (shown below) as an onclick event or by any other functions

chatbot html page=> there is a logo, which I placed in bottom right and when someone clicking on that logo, a form div is opening... this project I'm calling in another project inside iframe

    <iframe id="overlayDiv"  src="http://127.0.0.1:5501/index.html" frameborder="0"</iframe>

classes for toggling

<style>
            .overlayDiv {
                border: 1px solid red;
                z-index: 999;
                position: fixed;
                right: 0;
                bottom: 0;
                height: 91px;
                width: 92px;
                cursor: pointer;
            }
    
            .overlayDivActive {
                height: 470px;
                width: 390px;
                position: fixed;
                right: 0;
                bottom: 0;
                z-index: 999;
                border: 1px solid red;
            }
        </style>

for that , below functionality is not working

$(document).ready(() => {
        
            $('#overlayDiv').click(function (e) {
                $('#overlayDiv').toggleClass('overlayDivActive')
            })

        })

CodePudding user response：

I'm a little unsure what you're trying to achieve exactly. You can make use of

//js
document.getElementById("overlayDiv").classlist.toggle("someClass");
//jQuery
$(".overlayDiv").toggle();

if that is what you're referring to.

You may or may not find this to be useful as well: https://www.w3schools.com/tags/tag_details.asp I hope this helps a little bit since you've given minimal examples

CodePudding user response：

You can use either of these two options and it will work for you. The important thing is that you order well what you have to do.

This would be using Javascript

document.getElementById("overlayDiv").classlist.toggle('active');

This would be using jquery

$(".overlayDiv").toggle('active');

This will add the 'active' class to your tag, so now you can work on your css like this

.overlayDiv {
                border: 1px solid red;
                z-index: 999;
                position: fixed;
                right: 0;
                bottom: 0;
                height: 91px;
                width: 92px;
                cursor: pointer;
            }

.overlayDiv.active {
                height: 470px;
                width: 390px;
                position: fixed;
                right: 0;
                bottom: 0;
                z-index: 999;
                border: 1px solid red;
            }

the toggle is a very powerful tool that you will use more than once in projects.

I hope I could have helped you.