Ways to conceal CSS on the page when triggering a different element

I am trying to achieve the functionality of hiding the black arrow when clicking on the green arrow, all without using jQuery.

Here is my fiddle: http://jsfiddle.net/t5Nf8/195/

html:

<div class="arrow-down"></div>
<div class="arrow-up"></div>

css:

.arrow-down {
    position: absolute;
    /*display: none;*/
    left: 1.5px;
    top: 6px;
    z-index: 1;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0ef2c4;
    cursor: pointer;
}
.arrow-up {
    border-color: transparent transparent black;
    border-style: dashed dashed solid;
    border-width: 0px 8.5px 8.5px;
    position: absolute;
    left: 1.5px;
    top: 14px;
    z-index: 1;
    height: 0px;
    width: 0px;
}

js:

$('.arrow-up').click(function {
    $('.arrow-down').hide();
});

If anyone has a solution, I would greatly appreciate your help!

javascriptcss

Answer №1

$('.arrow-down').click(function(){
             $('.arrow-up').toggle();       
   });

$('.arrow-up').click(function(){
             $('.arrow-down').toggle();       
   });
  1. The Code had a small mistake in syntax where '()'' was missing after 'function'. It should be corrected like this: function()
  2. The toggle method was used to show and hide elements, but you can simply use hide if preferred.

Check out the DEMO here!

Answer №2

As stated by @JoeFitter's response, you have the ability to switch the visibility of the "upArrow" element on and off by clicking the "downArrow" using JavaScript

var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];

downArrow.addEventListener('click', function() {
    if(upArrow.style.display == 'none'){
        upArrow.style.display = 'block';
    }

    else{
        upArrow.style.display = 'none';
    }
});

Experience Live Demo

Answer №3

const downArrow = document.getElementsByClassName('arrow-down')[0];
const upArrow = document.getElementsByClassName('arrow-up')[0];

downArrow.addEventListener('click', function() {
  upArrow.style.display = upArrow.style.display !== 'none' ? 'none' : 'block';
});

Check out this link for a working example!

Answer №4

Retrieve the value of the display property using 

getComputedStyle(el).getPropertyValue("display");
, then use a simple conditional statement to show or hide your arrow!

Note: This is achieved solely using JavaScript, no external libraries are needed.:

var display = getComputedStyle(up).getPropertyValue("display");
if ( display !== "block" ) {
    up.style.display = 'block';
} else {
    up.style.display = 'none';
}

Curious to see it in action? Check out the demo here: http://jsfiddle.net/g4g9doj0/

Answer №5

It's not as simple as just using CSS, incorporating jQuery might be a better approach:

The CSS instructions seem redundant to me and can probably be simplified to:

.arrow-down {
    border-color: transparent transparent black;
    border-style: dashed dashed solid;
    border-width: 0px 8.5px 8.5px;
    height: 0px;
    width: 0px;

}

.arrow-up{
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0ef2c4;
    cursor: pointer;
}

Using jQuery, the code would look something like this:

$(document).ready(function(){
    $(".arrow-up").click(function(){
        $(".arrow-down").hide();
    });
});

Check out the example here!

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

Ways to resolve a 500 internal error

I have created an online test system for students, but I am facing an issue with passing answers in JSON format. Whenever I attempt to do so, I encounter a 500 internal error and I am unable to identify the root cause. Even after removing lengthy JSON dat ...

javascriptjqueryajax.net-core

Retain the spaces within a string in Java and JavaScript programming languages

My Java code sends data to the browser via an HTTP request, and the output looks something like this: JAVA CODE OUTPUT | Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time | | 0 | SELECT STATEMENT | | | | 3 ...

javascriptjavahtmlcssangularjs

Utilize jQuery ajax to target a particular recurring input

I am using HTML code along with another jQuery loop. Within this loop, there is an input element that is also being looped. I am trying to manipulate it using jQuery Ajax... but I am facing an issue where only the first input element works properly. The re ...

javascriptjqueryajax

Encountered an issue with reading null properties when trying to access 'defaultPrevented' in bootstrap 5 toast

Implementing a custom hook to display and hide toast messages is working perfectly fine when invoking showToast in the button component of the Toast, but encountering an error when using this hook outside, for example in the button component of the App. Ty ...

javascriptreactjsreact-hooksbootstrap-5

Choose an item from the list and use the scrollbar when the menu opens

My select element has over 50 options, but the options popup and go off the page without a scroll bar. As a result, I can only see and select up to 20 options. Is there a way to make the select element display a vertical scroll bar when there are more tha ...

htmlcss

Programmatically simulating a click on a link within a Windows Universal Windows Platform (U

I am facing an issue with a code that has multiple items with the same href attribute due to it being an external source. I need help figuring out how to programmatically click on a specific link tag using C# within a WebView or by accessing the source d ...

javascriptc#webviewuwp

"The latest version of Angular, version 15, experiencing issues with javascript loading

Currently, I am diving into the world of Angular and encountering a puzzling dilemma. Surprisingly, my application performs flawlessly on various browsers such as Chrome, Firefox, Brave, Opera, and even on mobile versions except for Safari. Both the deskto ...

javascriptangularsafarireadystatedomcontentloaded

Creating a secure countdown timer on the server side: Best practices

I've developed a quiz application that features a countdown timer of 300 seconds for answering 10 questions. Once the time is up, the scores are sent to the server where they are compared with the answers and then stored. However, my main concern is t ...

javascriptphpajaxtimecountdowntimer

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

javascriptjquerycssanimationgsap

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is there a way to receive four input values from the user using just one textbox and display them on separate lines? function collectData() { var userInput, i; var textOutput = " "; for (i = 0; i <= 3; i++) { userInput = document.g ...

javascripthtmldeveloper-tools

JEST: Troubleshooting why a test case within a function is not receiving input from the constructor

When writing test cases wrapped inside a class, I encountered an issue where the URL value was not being initialized due to dependencies in the beforeAll/beforeEach block. This resulted in the failure of the test case execution as the URL value was not acc ...

javascriptnode.jstypescriptjestjs

NodeJS API integration failure during ReactJs login attempt

Currently, I am tackling a small project on implementing user login functionality in ReactJs with Nodejs and Express-session. The issue I am facing is that my front end (React login page) isn't functioning properly. Below is the Fetch API code snippet ...

javascriptnode.jsreactjs

The Safari browser is having trouble rendering the website's CSS and HTML properly

Check out this example of how the website should look on Chrome for Android: https://i.stack.imgur.com/RzUSp.jpg And here is an example from Safari on iPad Mini 2: https://i.stack.imgur.com/PAj2i.jpg The Safari version doesn't display the proper fon ...

htmlcsssafari

When typing in the textarea, pressing the return key to create a line break does not function as expected

Whenever I hit the return key to create a new line in my post, it seems to automatically ignore it. For example, if I type 'a' press 'return' and then 'b', it displays 'ab' instead of 'a b'. How can I fi ...

javascriptphphtml

Next.js lacks proper Tree Shaking implementation for MUI

After setting up a react app with next.js, I noticed that the bundle size for the client significantly increased when importing MUI components. Specifically, there was a large module called @mui/base added to the bundle, even though I am only using three M ...

javascriptreactjsnext.jsmaterial-uimodern-ui

How to use image source and mouse hover effects in CSS3

Can we create a CSS3 class for the src, onmouseout, and onmousehover properties? <img src="http://www.example.com//images/pic.png" onmouseout="this.src = 'http://www.example.com/images/pic.png'" onmouseover="this.src = 'http://www.examp ...

htmlcssasp.net-mvc

Windows Outlook - automatic tag wrapping feature

My goal is to ensure that buttons wrap properly inside their cell. I have set a max-width for the cell as well as a ghost table of 200px. The width should not extend past 200px, causing the span to wrap to the second row automatically. This method works ev ...

htmlcssemailoutlookhtml-email

Switching the background color of alternating divs in reverse order: a step-by-step guide

I am looking to alternate the background color of divs between odd and even, with the last div being grey and the second to last div being green. I have tried using the odd/even classes in CSS, but it did not work as expected. .main{ width:500px; height ...

javascripthtmlcss

Guide on displaying API data within nested fields in ReactJS

import axios from 'axios' import { CART_ADD_ITEM } from '../constants/cartConstants' export const addToCart = (uid, qty) => async (dispatch, getState) => { const { data } = await axios.get(`/api/v1/`) dispatch({ ...

javascriptnode.jsreactjs

Having trouble retrieving information from Node.js service in AngularJS 2

I am currently expanding my knowledge of Angular and attempting to retrieve data from a node js service using Angular 2 services. When I access the node js services directly from the browser, I can see the results. However, when I attempt to fetch the dat ...

javascriptjsonnode.jsangulartypescript