Question 36247 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to toggle classes of iframe in javascript? – Jquery

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" class="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')
            })

        })
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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 this helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search