Select: Exchange icon when clicked

UPDATE MENU ICON jsfiddle.net/a3MKG/83/

Can someone provide guidance on how to change the menu icon image upon clicking it? I would like the icon to switch to a different image (such as an X) once it has been clicked.

Please Note: When the menu icon is clicked, the drop-down menu is displayed. You can click anywhere outside of the menu to close it, so there is no need to click on the X image to hide the menu. The new icon image should only be an X when the drop-down menu is actively visible.

Any assistance on this matter would be greatly appreciated. Thank you in advance.

javascriptjquerycss

Answer №1

Upon seeing your inquiry about how to close the image by simply clicking on it, I took the liberty to create a fiddle.

In order to achieve this, I made a slight adjustment by changing the div dropTitle to an anchor tag and included a new class called menu-open.

.menu-open{   background:url('http://webservices.lib.harvard.edu/hlportal/images/threeline.png');
     background-size:100% 100%;
}

Additionally, I implemented a function that would toggle it with the 'close' action.

$('a').click(function(){
   $(this).toggleClass('close')
});


.close{background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png');
    background-size:100% 100%;
}

I made some minor adjustments to your dropTitle class:

.dropTitle{
  display:block;
    width:50px;
    height:50px;
  cursor:pointer;
}

Rest assured, the functionality remains unchanged.

Answer №2

Avoid using javascript when you can achieve the same with css!

input, input:before, input:after {
  display: block;
  content:'';
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width:20px;
  background:black;
  height:4px;
  border-radius:2px;
  transition: all linear 0.1s;
}
input:after{
  top:3px;
}
input:before{
  top:-7px;
}
input:focus:after{
  transform: rotate(45deg);
  top:-4px;
}
input:focus{
  background:transparent;
}
input:focus:before{
  transform: rotate(-45deg);
  top:0px;
}
input:not(:focus) + div{
  display:none;
}
<input type="checkbox" />
<div>
  <img class="dropPillow" src="https://image.freepik.com/free-icon/square-outlined-shape_318-75498.png">
</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

What is the best way to insert a text input with variable width into a table?

I am currently using twitter-bootstrap and have encountered an issue with two tables. The first table can be viewed here: http://jsfiddle.net/MELUd/ <table class="table table-bordered"> <thead> <tr> <td colspan ...

htmlcsstwitter-bootstrapresponsive-design

Tips on keeping a div element in a fixed position until triggered by jQuery

I've managed to create a navigation bar within a header that sticks to the top of the screen once you scroll down past 100px. The functionality works well, but I'm looking to make the navigation bar stay fixed on the right until it snaps, essenti ...

javascriptjqueryhtmlcss

Tips for creating a MaterialUI list that wraps to the next line?

import React from 'react'; import { List, ListItem, } from '@material-ui/core'; import { makeStyles, createStyles, } from '@material-ui/core/styles'; import clsx from 'clsx'; import VideoCard from './VideoCa ...

cssreactjsmaterial-ui

When trying to access $model.show() in Vue.js, the returned model is showing as undefined

I'm running into a console error message every time I try to click the button for $model.show('demo-login'): TypeError: Cannot read property 'show' of undefined Error output when the button is clicked: TypeError: Cannot read prop ...

javascriptvue.jsvuejs2vue-component

Issues with jQuery ajax when trying to access remote JSON data

Even though I receive a json response when entering the URL in my browser, I am unable to access it using my code. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $.ajax({ url:"http ...

jqueryjsonajax

Organizing and managing one-on-one table tennis matches using a customized data structure. Leveraging the power of Vue, JavaScript, and

Seeking advice on the best approach for storing table tennis match data in a web application. I currently have a method in place that works, but I'm open to suggestions for improvement. Here is my current idea: matches: [ { id: 1 datePlayed ...

javascriptfirebasevue.js

Items within a shared container are currently displaying stacked on top of each other

I am facing an issue with my bike images and manufacturer names appearing on top of each other instead of next to each other. Despite using "col-md-12", the grid columns are not aligning horizontally as expected. How can I adjust the code so that each imag ...

cssangularjstwitter-bootstrap

Does adding the async attribute to a script impact the timing of the onload event?

I am facing an issue with a webpage that contains a script tag in the HEAD section: <script src="somescript.js" type="text/javascript" async></script> Since it has the async attribute, this script loads asynchronously, allowing the browser to ...

javascripthtmldom

Has $.support.fixedPosition feature been removed starting from version 1.8?

While browsing the jQuery changelog, I noticed that the $.support.fixedPosition feature introduced in version 1.7 seems to have disappeared in version 1.8. Can anyone shed some light on where it has been relocated or if it has been removed altogether? ...

jquery

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Let's set the stage: MainComponent.html <form #someForm > <input type="text" name="title" [(ngModel)]="mainVar" /> <child-component /> <input type="submit" [disabled]="someForm.form.pristine" /> </form> ChildComp ...

javascripthtmlformsangularangular2-forms

An issue arises when ng-pattern fails to recognize a regular expression

My form includes inline validation for a specific input field. <form name="coForm" novalidate> <div> <label>Transaction: </label> <input type="text" name="transaction" class="form-control" placeholder="<Dir ...

javascriptregexangularjsng-pattern

Updating REST API: Sending a PUT request without requiring all data to be included in json format

I have a controller set up for updating user data. The controller can accept up to 4 values. I am wondering if it is possible to only update the name field when sending data to this route, leaving the rest of the fields unchanged (and not empty). Should ...

javascriptnode.jsexpress

A Guide to Implementing v-for in a JSON Array with Vue.js

After receiving JSON data from the server: [ {"id":"2","name":"Peter","age":"24"}, {"id":"4","name":"Lucy","age":"18"}, ] I am ...

javascriptarraysjsonvue.js

Incorporate unique color variables from the tailwind.config.js file

I am working on a project using nextjs and typescript, with tailwind for styling. In my tailwind.config.js file, I have defined some colors and a keyframe object. My issue is how to access these colors to use as background values in the keyframe. Here is ...

javascriptcssreactjsnext.jstailwind-css

regular expression for replacing only alphanumeric strings

I'm currently developing a tool that tags alphanumeric words based on the option selected from the right-click context menu. However, I am facing issues when a group of words containing special characters is selected. I have been using the following ...

javascriptregex

Issue: Unable to use the b.replace function as it is not recognized (first time encountering this error)

I can't seem to figure out what I'm doing wrong. It feels like such a silly mistake, and I was hoping someone could lend a hand in solving it. Here is my controller - I'm utilizing ng-file-upload, where Upload is sourced from: .controller( ...

javascriptangularjs

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Below is a snippet of JavaScript code that I am working with: wdata['account'] = {"value": $(input).val(), "title": "Номер карты получения"}; var r = { "ipayway": ipw_selected, "wpayway": wpw_selected, "amount_type" ...

javascriptjsoncookiessafaricross-browser

Is it possible to align a clip-path starting from the right edge?

On my webpage, I have a unique hamburger icon that is positioned 2rem away from the right and top edges. I am looking for a convenient way to create a clip path that grows from its center point. Calculating the center point is not difficult but unfortunate ...

cssclip-path

What is the method to implement timeago.js?

I've recently embarked on my journey to learn JavaScript, and it has only been two weeks since I started. As a beginner, I'm encountering some difficulties with implementing timeago from . The specific line of instruction that's giving me tr ...

javascriptjquery

What could be causing my Javascript prompts to not appear in my Express.IO .ejs file?

I am fairly new to JavaScript and exploring Node with Express.IO. I'm currently working on a project that involves tracking real-time connections made by different 'users' to the server. However, I've encountered an issue where my promp ...

javascriptnode.jsexpresssocket.ioexpress.io