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>
Currently, I am working on a web application using Node.js. In my project, I have two main files. The first one is Server.js, where I handle server actions such as going online. The second file contains a large object filled with data. I successfully impo ...
I am currently working on developing a clock component that displays the current time in real-time. Issue: The initial time is correctly displayed when the page loads (HH:mm A), but the clock does not update dynamically. clock.component.ts : import { ...
My createUserWithEmailAndPassword function seems to be malfunctioning. Here is the code snippet I am using - config.js import firebase from 'firebase/app' import 'firebase/firestore' import 'firebase/auth' const firebaseCon ...
I am currently facing an issue while attempting to establish a relationship between two tables, 'user' and 'accessToken'. The error message I am encountering is hindering the process. Below are the models in question:- User model:- ...
In the application I'm developing, PHP and JavaScript are being used extensively. One of my tasks involves deleting entries from the database, which is a time-consuming process. To keep the end-user informed, I would like to provide updates on the pr ...
Here is a high-level overview of what happens: The following code functions correctly... <div id='showme'></div> <div id='theform'> <form ...> <input required ... <input required ... <inpu ...
I have successfully generated charts from a database using JSON script. However, I am facing an issue where the chart only displays when I click on an option value. What I want to achieve now is setting a default value option so that when the website ope ...
I need to access the $scope value in order to update its data values via a chrome extension. I have attempted to obtain the $scope using the code below: var $scope = angular.element(document.getElementById('name')).scope() While this code wor ...
I've been experimenting with building a webpage that allows users to search through a .txt file using only html and php. Below is the code I have come up with: <?php $file = 'myfile.txt'; if (preg_match_all($pattern, $contents, $matches ...
I am dealing with a situation on my website where I need to hide a sidebar when clicked. $('#sidebar').toggle('slide', 'left', 300) In addition, I have implemented a CSS style to hide the sidebar on mobile devices. #sidebar ...
I'm in the process of creating a Django app that features a word list. The app currently utilizes a speech function to inform the user of the first word on the list. The user is then able to record an audio clip of a word they say, which is converted ...
Imagine having two different resource lists on your website: one for users and the other for groups. As you navigate through each list in increments of 10, it's important to preserve the state of the list so that when you share the URL with someone el ...
Is there a way to customize the CSS style of my Struts2 jQuery grid tags? I'm having trouble adjusting the font size of the header layer. Can someone please advise on how to change the style, color, and other formatting of the grid similar to regular ...
Currently, I am interested in utilizing a one-line textarea (with rows=1 and overflow-x:hidden;) similar to input type="text. However, I have encountered an issue where the content scrolls with "jumps" while typing inside it: https://i.stack.imgur.com/Rzf ...
While signing in to my website from localhost is successful, I encounter an issue when trying to do the same from my production build. The login attempt from the prod build (hosted on Vercel) does not post to , but instead goes to . I am perplexed by the a ...
I'm currently working on a node.js application using express, and I am in the process of creating a login form for my users. I want to include a Javascript file that utilizes fetch() to send a POST request to my API for user authentication. However, I ...
In my JavaScript code, I have a series of functions that need to be executed in a specific order. One function may return a value synchronously, while others do not return anything or return an Observable result asynchronously. How can I ensure that each ...
Having two radio buttons, <div class="class1"> <span><input name="chk1" type="radio" checked="checked" id="check1"/>Option 1</span> <span><input name="chk2" type="radio" id="check2"/>Option 2</span> </div> ...
I'm looking for a way to efficiently convert large and repetitive javascript objects into JSON strings. With the abundance of repeating property names in these objects, I want to streamline the process by replacing those names with predefined abbrevia ...
Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...