I attempted using the slideToggle() function to create a submenu, but unfortunately, it's not functioning as expected. After viewing some examples, I noticed that it was used on <div> elements and not <ul> elements. Could it be that this function only works with <div> elements? You can find my code on Fiddle here: Fiddle
I have ensured that I am correctly inserting the <script> tags in my HTML file, and all my other jQuery codes are running smoothly.
Be sure to include the jQuery library in your fiddle. Also, double-check your code for any typos; the callback function should be function(), not Function()
$(document).ready(function() {
$('.mainmenu').click(function() {
// ----^----- f should be lowercase
$('.submenu').slideToggle('fast');
});
});.mainmenu {
cursor: pointer;
color: #ffffff;
text-align: center;
display: block;
}
.mainmenu p {
font-size: 20px;
line-height: 10px;
}
.submenu {
list-style-type: none;
padding: 0;
text-align: center;
border: 2px solid black;
border-top: 0;
border-radius: 0 0 10px 10px;
background-color: #464646;
width: 90%;
margin: 0 auto;
margin-bottom: 5px;
display: none;
}
.submenu li {
border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.submenu a:hover {
background-color: aliceblue;
color: #000000;
}
#sidebar {
background-color: white;
float: right;
}
#sidebar>ul {
list-style-type: none;
margin: 0;
padding: 20px;
}
#sidebar>ul >li {
position: relative;
width: 21em;
background-color: #1a8891;
border: 2px solid #0c383a;
margin-bottom: 5px;
border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
display: block;
position: relative;
width: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
}
#sidebar li:hover {
background-color: #156b72;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="mainmenu">
<div class="arrow-up"></div>
<p>Text</p>
</li>
<ul class="submenu">
<li><a href="">Text</a>
</li>
<li><a href="">Text</a>
</li>
<li><a href="">Text</a>
</li>
<li><a href="">Text</a>
</li>
<li><a href="">Text</a>
</li>
</ul>
<li><a href="">Text</a>
</li>
<li><a href="">Text</a>
</li>
<li><a href="">Text</a>
</li>
<li><a href="">Text</a>
</li>
<li><a href="">Text</a>
</li>
</ul>
</div>;I am struggling to understand why the alert is being triggered in this scenario. The error value appears to be undefined. The add_size.php file executes a simple update query and returns a string response. Despite the query working correctly and the record ...
Currently, I am developing a game that includes a timer and an event listener that notifies the user not to switch tabs. However, I am facing an issue where the event listener triggers before the game's start button is clicked. Is there a way in JavaS ...
Hello everyone, I am facing an issue with the header ("Location: url.php") in PHP. I wrote the code using Macromedia Dreamweaver MX 2004. Everything works fine on my localhost server, but when I upload it to the godaddy server, the redirection gets stuck o ...
Currently, I am working with Express.js to create a straightforward login post request. Here is the code snippet: app.post("/login", (req, res) => { res.send( { isUserRegistered: userLogin(req.body.strEmail, req.body.strPassword), ...
Is it possible to configure the scope of this, even if it's not standard? Perhaps restricting it to only private ones? Thanks. ...
Is it possible to use an AJAX call to pass a value to a PHP script? For example, if I have the URL example.com/test.php?command=apple, how can I make sure that the code is executed properly on the server side? This is how my code looks like: PHP: <?p ...
I am encountering an issue with a button that is supposed to show a div on click using Bootstrap 5's "Collapse" class. The problem is that the content shows up correctly on the first click, but it doesn't hide again when the user clicks the butto ...
Is there a way to fetch dynamic sidebar menu data from the database using AJAX in the adminlte 3 dashboard along with bootstrap 4? I have tried loading the sidebar menu data dynamically using AJAX, but the sidebar open/close functionality is not working pr ...
Experimenting with PHP and probably not doing it correctly, but this is just a proof of concept to get approval for the right approach. I am using a php script for login and posting variables from forms. The issue: I am echoing out an HTML code that inclu ...
Can anyone provide assistance with my VBA Excel code issue? Set ieDoc = Nothing Set ieDoc = ieApp.Document For Each Anchor In ieDoc.getElementsByTagName("div") If InStr(Anchor.outerHTML, "CategoryIDName-popup") > 0 Then ...
It seems that the user is defined, but user.user_id is not. My framework of choice is express.js and passport.js. router.post('/requestSale', function(req,res){ console.log('session user: ' + req.session.passport.user); //logs ...
I'm having trouble implementing a hover effect that changes the color of an image to blue when it is hovered over by the mouse. I've defined a class for the images and styled it in my CSS, but the effect isn't working as intended. I've ...
I have a list that needs to undergo a shuffle animation when a button is clicked. The process I need is: Items in the list should fade out The items should then be randomized Finally, the items should fade back in. Each individual part of my script work ...
As someone who is new to front end development, I am facing a challenge with my web app. The requirement is that when a user hovers over an image, I need a 'box' to open nearby and display a pie chart. Although I have managed to get the hover fu ...
Here is the script I have been using on my website to send instant messages. It has been working well in 99.9% of cases, but occasionally a user reports being unable to send messages. Recently, a new report came in from a user using MIE 8.0. Upon checking ...
I'm currently working on a function call where I want to extract the value of the variable data and place it in the data section of the function. However, despite my efforts, I haven't been successful so far. In PHP, I am attempting to retrieve t ...
My goal is to set the current category ID in a variable, and if the category changes, I want to store that as well. Then, I need to compare both IDs. If they are not equal, I want to set the subcategory to null. However, I am unsure of where my mistake lie ...
I'm facing an issue with an ajax call. Below is my code for the ajax: $('#Subjects').click(function() { $.ajax({ type: 'POST', url: '../portal/curriculum.php', data: 'studentNumber=&apos ...
Looking for a solution to click on a specific link that has the attribute ng-switch-when="next" in Python Selenium, among multiple links with similar classes and elements in the HTML code. <a class="ng-scope" ng-switch-when="prev" ng-click="params.page ...
I am currently in the process of developing a LeafletJS Map integrated with Bootstrap buttons. I have successfully configured the map to be fullscreen and positioned the buttons on top of it. Below is the code snippet that I utilized for this setup: <! ...