To make the display block when clicking this icon:
<div class="index-navi-frame-box">
<p onclick="expandFunction()">
<i class="fa fa-bars"></i>
</p>
</div>
Here is what it should change to:
<div class="index-navi-expanded"></div>
CSS for index-navi-expanded:
.index-navi-expanded{
width: 100%;
height: 30%;
background-color: #757575;
position: relative;
display: none;
}
To utilize jQuery, you have the option to replace the old class with the new one in this manner:
$(".index-navi-frame-box").on("click", function() {
$(this).removeClass("index-navi-frame-box").addClass("index-navi-expanded);
});
Alternatively, it is advisable for the new class to simply override the styles of the previous class, allowing you to add the new class without removing the old one.
Avoid using inline JavaScript (onclick="") and consider placing the above code in a separate .js file or within <script></script> tags.
Give this a shot:
When you click on a paragraph within the ".index-navi-frame-box" element, it triggers a function that changes the "display" property of the ".index-navi-expanded" element to "block".
To achieve the class toggling in pure JavaScript, you can utilize the Element.classList property as shown below:
var x = document.querySelector(".index-navi-frame-box");
x.addEventListener("click", function(){
this.classList.add("index-navi-expended");
this.classList.remove("index-navi-frame-box");
}).index-navi-expended{
width: 100%;
height: 30%;
background-color: #757575;
}<div class="index-navi-frame-box">
<p>
ABCD
<i class="fa fa-bars"></i>
1234
</p>
</div>You have the option to use the toggleClass method in order to switch back and forth between the two classes.
HTML Code Snippet:
<div id="index-navi" class="index-navi-frame-box">
<p id="toggleNav"><i class="fa fa-bars"></i></p>
</div>
JS Script:
$('#toggleNav').click(function() {
$('#index-navi').toggleClass('index-navi-frame-box');
$('#index-navi').toggleClass('index-navi-expended');
});
review the following code snippet:
<div class="index-navi-frame-box"><p onclick="customfunction()"><i class="fa fa-bars"></i></p></div>
<div class="index-navi-expended" id="index-expandable"></div>
<script>
function customfunction() {
var index_expandable = document.getElementById('index-expandable');
index_expandable.style.display = "block";
}
</script>
I am working on creating a 3x3 grid using Bootstrap. My goal is to have consistent spacing between the rows and columns. How can I achieve this effectively? ...
Here is the code snippet containing two methods: getToken and validateuser. I am fetching the token from getToken and passing it as a parameter to validateuser. However, before retrieving the token, my second API call is being executed. ...
When a user clicks on a textarea, I want it to smoothly change height to 60px and slide down in one fluid animation. Check out the JSFiddle example here: http://jsfiddle.net/MgcDU/6399/ HTML: <div class="container"> <div class="well"> ...
I'm grappling with obtaining a JSON file from the server. The endpoint requires a year parameter, which needs to be set as the current year number as its value (e.g., ?year=2019). Furthermore, I need to fetch data for the previous and upcoming years a ...
I am currently working on creating a functionality similar to the core fs module's methods, where there is an Async method by default and a Sync method if requested like fs.readDir() and fs.readDirSync(). In my case, I have a method named fetchUrls w ...
I'm facing an issue trying to access 'Home' from Form.js. Despite my efforts in arrowF, routes, and other methods, the same error persists. How can I resolve this? In my Form.js file, when I call onPress=(), I have tried using functions, ...
Currently, I am using React and Tailwind CSS and facing an issue with the transition property. My goal is to have a div grow in width and height from the center until it covers the entire viewport when a specific state variable becomes true. The content in ...
When my API, built using expressJS, returns JSON data as a regular response, everything functions smoothly. However, when an error occurs, it returns an error code along with plain text by simply invoking res.sendStatus(401). This poses a challenge on my ...
I am working with a circle image that I need to resize based on its placement. This image is intended to be a background for a character or two of text. Specifically, whenever the number 1 or 2 appears in a certain element, I want the circle to appear beh ...
Is there a way to position a div in the center of the screen or its parent div, and have it fixed so that it does not shift when its width changes? I have a div containing a table, as shown below: I'm unsure if the outer div is needed. My goal is to ...
This is a custom class called YesNoPanel that extends the Panel class: public class YesNoPanel extends Panel { /** * */ private String password = "Password"; public String getPassword() { return password; } public void setPassword(String passwo ...
I am attempting to write data to a file on the server when a user clicks on a button, using JavaScript. I followed the method outlined in this Stack Overflow post: Saving a text file on server using JavaScript. Unfortunately, it did not work as expected. ...
After setting the editor on the frontend, I encountered an issue with initializing tinymce. Here is my code: <head> <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> </head> <body> <a class=pageedit>Edit< ...
Here is a sketch of what I am aiming for: This is my implementation using Material UI's Accordion component. Below is the code snippet for the AccordionDetails section, which is where I need assistance. Specifically, I want to align FilterC/the swit ...
I am currently facing a challenge with integrating the WordPress Contact Form 7 Plugin into a website I have built on WordPress. The theme of the site utilizes jQuery to override default link behavior and AJAX to load pages without refreshing the entire pa ...
My code is causing a NaN error, and I'm struggling to identify the root cause. Even providing a specific number in the addnum function did not resolve the issue. <script> var result = document.getElementById("result"); var inputVal = ...
I am trying to display a local image in React js. After referring to this solution, I have tried the following code - <img src={require('../public/images/icon.png').default} /> The image "icon.png" is stored in my public folder, and I&apos ...
Task at Hand: I need to display the alert on my page for a few seconds to allow reading. Is there any function in Selenium Web-driver that can help with this? I am new to automation and have been learning about explicit waits. I tried using explicit wait ...
Using DataGrid Material UI, I am facing an issue where the selected row is not being deleted when clicking on the delete button. The problem arises from setting the ID value in the useState hook and encountering asynchronous behavior in deleting the rows. ...
I'm dealing with a JSON object created in JavaScript and passed to PHP via AJAX. The issue I'm facing is that I can't figure out how to assign keys to each JSON object within the JSON array. Here's an example of how the JSON array looks ...