Toggling Selected Items with Jquery Show/Hide Feature

Is there a way to toggle the visibility of selected items in the mobile menu?

For instance, when I click on the menu toggle, I would like all the items in the Div class sidebar to be displayed but any content within its child div with class="sticky" should remain hidden.

This is how my menu HTML looks for the toggle link icon:

<a id="pull" class="toggle" style="cursor:pointer">Menu</a>

When the menu is clicked, I want to display all these elements except the ones inside the class="sticky"

<div class="sidebar">
            <ul class="leftnav">
                  <li>» <a href="#">January</a></li>
                  <li>» <a href="#">February</a></li>
                  <li>» <a href="#">March</a></li>    
                  <li>» <a href="#">April</a></li>
                  <li>» <a href="#">May</a></li>
                  <li>» <a href="#">June</a></li>    
                  <li>» <a href="#">July</a></li>
                  <li>» <a href="#">August</a></li>
                  <li>» <a href="#">September</a></li>
                  <li>» <a href="#">October</a></li>
                  <li>» <a href="#">November</a></li>
                  <li>» <a href="#">December</a></li>
            </ul>
      <div class="sticky">
I dont want to show this item in toggle menu.
  </div>
  </div>
javascriptjqueryhtmlcsstoggle

Answer №1

$(function() {
let $sidebar = $('.sidebar'),
      $btn = $('.toggle');
      
  $btn.click(() => {
  $sidebar.toggle();
  })
})
.sidebar{
  display: none;
}

.sticky{
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="pull" class="toggle" style="cursor:pointer">Menu</a>
<div class="sidebar">
            <ul class="leftnav">
                  <li>» <a href="#">January</a></li>
                  <li>» <a href="#">February</a></li>
                  <li>» <a href="#">March</a></li>    
                  <li>» <a href="#">April</a></li>
                  <li>» <a href="#">May</a></li>
                  <li>» <a href="#">June</a></li>    
                  <li>» <a href="#">July</a></li>
                  <li>» <a href="#">August</a></li>
                  <li>» <a href="#">September</a></li>
                  <li>» <a href="#">October</a></li>
                  <li>» <a href="#">November</a></li>
                  <li>» <a href="#">December</a></li>
            </ul>
      <div class="sticky">
This item should remain hidden in the toggle menu.
  </div>
  </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incrementing numbers automatically within a JSON object while iterating through a for loop

I am struggling to figure out how to append the var i to the left side of the object declaration. This error is causing me troubles. Any assistance in resolving this issue would be greatly appreciated. If you have any alternative solutions, I am open to e ...

javascriptjqueryjsonloops

Misalignment of social media buttons is causing display issues

I have arranged my Social Media Div to the right of my Review Div: http://jsfiddle.net/eYQWE/ The issue: the social media buttons in My Social Media div are not staying in a straight line and keep dropping below my Review Div. Do you have any suggestions ...

htmlcssfacebook-social-plugins

Error encountered while making a REST API call in Ajax: Unforeseen SyntaxError: Colon unexpected

I am currently troubleshooting my code to interact with a REST API. My platform of choice is "EspoCRM" and I aim to utilize its API functionalities. The official documentation recommends using Basic Authentication in this format: "Authorization: Basic " ...

javascriptajaxjson.htaccessrest

Can you explain the distinction between a standard $.post() method sending strings versus one sending a file?

Curious as to why I am unable to upload a file through JQuery using the $.post() function? Are there any modifications that can be made to the request in order to enable file uploads? $.post(url, { file: fileName, path: "/uploaded_files" }, function (res ...

javascriptjqueryasp.net-mvcjquery-plugins

Storing information in a database

Need help troubleshooting why my form isn't saving data to the database. <div class="container"> <div class="row" style="margin-top:200px;"> <form ENCTYPE="multipart/form-data" ACTION="upload.php" METHO ...

phphtml

Are you facing issues with jQuery Ajax failing to respond?

On my webpage, I have a function that is supposed to call an ASP.NET webservice. It seems like the function is executing, but nothing happens on the page. Below is the code for the function: $("#BlogSelectList li a").click(function () { var str = ($(t ...

jqueryasp.netajaxweb-servicesjson

How can I dynamically set the width of a span element in HTML?

Hello there! As a beginner in html and angularjs, I'm experimenting with dynamically assigning span width based on an angular js response. <div class="statarea" ng-repeat="x in names"> <div class="ratingarea"> <div class=" ...

javascripthtmlcssangularjs

There was a problem establishing a WebSocket connection to 'ws://127.0.0.1:2000/'. The attempt failed with the following error: net::ERR_CONNECTION_REFUSED

I have integrated websocket functionality using a repository found at https://github.com/kishor10d/CodeIgniter-Ratchet-Websocket After successfully testing the websocket on my local environment, I encountered issues when uploading the files to the live se ...

javascriptphpcodeigniterratchet

What is the best way to simulate fetch in Redux Async Actions?

When writing tests in the Redux Writing Tests section, how does store.dispatch(actions.fetchTodos()) not trigger the fetch method when store.dispatch is directly calling actions.fetchTodos? The issue arises when trying to run similar code and encountering ...

javascriptunit-testingreactjsreduxredux-thunk

The validation process using jQuery may encounter errors when attempting to validate inputs before an 'require_from_group_exact' input

Utilizing the jQuery Validation Plugin, I am able to validate various inputs on an HTML page. It is necessary for the first name to always be provided, and either an email OR a mobile number but not both. This validation is achieved by using the require_fr ...

javascriptjqueryhtmlvalidation

"Enhance your form design with a Bootstrap Horizontal Form label paired with a subtle

How can I add a caption right below the Order label in this Bootstrap Horizontal form? The caption should be <small class="text-muted">Must be at least 200</small>. Where should it be placed? Please note that I need to place this muted caption ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to have the span update even if the input stays the same? Currently, it only changes when the input is different

Retrieve results of 3 lines (Ps) by entering a word in the text area and clicking search. If the word is found after clicking the button, a span will be displayed with the count of occurrences as well as the highlighted P(s) where it was found. If the wo ...

javascripthtmlcss

Creating a function while utilizing this conditional statement

Seeking guidance as I work on defining an 'explode' function. This function is intended to take a string input and insert spaces around all letters except the first and last ones. For example, if we call the function with the string Kristopher, i ...

javascriptfunction

Issues arising with shadows in THREE.js

I've been struggling to get shadows to work in this fiddle despite trying various configurations. I've looked at other similar questions, tried all the suggested solutions, but still nothing... My current settings include: this._box.castShadows ...

javascriptthree.js

Node.js causing issues with retrieving data from REST Calls

I am trying to make a REST API call from my PHP and Node.js application to a specific URL provided by the client, which is expected to return a JSON object. While I am able to successfully retrieve data using PHP, I'm encountering issues with my Node ...

javascriptjsonnode.jsrest

Top button on my website fails to function

I followed a tutorial to add a "back-to-top" button, and it works on my JSFiddle but not on my live page. The button shows up in Safari but doesn't scroll up. Any ideas why? // Contact Form $(document).ready(function() { $("#contactfrm").submit(f ...

javascriptjqueryhtmlcss

Troublesome behavior from Bootstrap's datepicker

Recently, I decided to dive into front-end development using Bootstrap but I'm facing some challenges. There are two issues here. The calendar glyph is appearing under the date input field instead of at the end of it on the same line. The picker is ...

jquerycssbootstrap-4responsive-design

Having trouble transferring files to an unfamiliar directory using Node.js?

const { resolve } = require("path"); const prompt = require('prompt'); const fsPath = require('fs-path'); // Retrieve files from Directory const getFiles = dir => { const stack = [resolve(dir)]; const files = []; whi ...

javascriptnode.jsnpmfilesystems

Image not displaying correctly with Neatshow JS Plugin

I've added neatshow.min.js to my project and I'm following all the instructions in the script. The first step is to hide images with CSS, then show them using the script. Here are my instructions: $(window).ready(function(){ $('img&ap ...

javascriptjqueryimage

Learn the process of adding data to an array through ajax requests

Is there a way to populate an array with offerIds from multiple products listed on a page by clicking the add to cart button? I am currently using the data attribute in the button to push the offerId string into the array, but only the latest offerId is be ...

jqueryarraysajaxpost