JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this?

Additionally, I have one more query: How can I remove the border when the button is clicked?

document.getElementById("arrowbtn1").onclick = arrow1;


function arrow1() {
  document.getElementById("p1").innerHTML = "You can invite up to 2 additional users on the<br>\
Free plan.There is no limit on team members for <br>\
the Premium plan.";
  document.getElementById("span1").style.color = "hsl(238, 29%, 16%)";
  document.getElementById("span1").style.fontWeight = "bold";
  document.getElementById("arrowimage1").style.transform = "scaley(-1)";
  document.getElementById("arrowimage1").style.marginTop = "5px";
}
<button type="button" id="arrowbtn1"> 
  <span id="span1">How many team members can I invite?</span>
  <img src="images/icon-arrow-down.svg" alt="arrow down icon" id="arrowimage1"class="arrowimage">
</button>
<p id="p1"></p>

javascripthtmlcss

Answer №1

To hide or display an element by toggling a specific class on the P element, it is recommended to directly place the text content in the HTML instead of using innerHTML and JS. Utilize CSS for styling the arrows as well. To achieve this functionality, you can check if the hiding class is present using 

el.classlist.contains('displayNone')
. If the condition is met, then make use of toggle/add/remove functions along with appropriate CSS to show the desired content.

document.getElementById("arrowbtn1").onclick = arrow1;

let span1 = document.getElementById("span1");
let arrow = document.querySelector(".arrow");
let p1 = document.getElementById("p1");

function arrow1() {
  span1.style.color = "hsl(238, 29%, 16%)";
  if (p1.classList.contains("displayNone")) {    
    span1.style.fontWeight = "bold";
    p1.classList.toggle("displayNone")
    arrow.classList.remove("down");
    arrow.classList.add("up");
  } else {     
    span1.style.fontWeight = "400";
    p1.classList.toggle("displayNone")
    arrow.classList.remove("up");
    arrow.classList.add("down");
  }
}
button {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.up {
  margin-top: 3px;
  margin-left: .5rem;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  margin-bottom: 3px;
  margin-left: .5rem;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.displayNone {
  display: none;
}
<button type="button" id="arrowbtn1"> 
  <span id="span1">How many team members can I invite?</span>     <span class="arrow down"></span>
  
</button>
<p id="p1" class="displayNone">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>

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 access a nested promise element in Protractor?

I've recently put together a function in protractor that I'd like to share: function findChildElementByText(parentElement, tagName, textToSearch) { return parentElement.all(by.tagName(tagName)) .then((items) => { items.map( item ...

javascriptseleniumprotractor

What is the best way to define a constant in the main scope that relies on a function parameter?

I'm currently exploring next-auth and I'm interested in leveraging unstable_getserversession. According to the documentation, I need to import options from another file. import { authOptions } from 'pages/api/auth/[...nextauth]' Howeve ...

javascriptnext.jsnext-auth

"Combining background images with javascript can result in displaying visual elements

Hello! I am in need of assistance with a CSS + Javascript fog effect that I have developed. It is functioning properly on Firefox, Opera, and Chrome but encountering issues on IE and Edge browsers. The effect involves moving two background images within a ...

javascripthtmlcssinternet-explorermicrosoft-edge

Express is throwing an error indicating that the specified route cannot be found. Is there a way to dynamically

After dynamically adding routes and sending a post request through Postman, I encountered a "not found" error message. In the app, a 404 is logged next to the endpoint, indicating that Express cannot locate it. However, I know that I added the router dynam ...

javascriptnode.jsexpress

Combining property values based on a common property in an array of objects using JavaScript

I have a large array filled with various objects structured like: [ { "type": "bananas", "count": 15 }, { "type": "kiwis", "count": 20 }, { "type": "bananas", ...

javascriptarraysangulartypescript

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

When the routes are multiple levels, such as http://www.example.com/profile/view, the RequireJS is failing to resolve dependencies properly. However, if the route is just http://www.example.com/view, the controller dependency is resolved correctly. Below ...

javascripthtmlangularjsrequirejsangular-ui-router

Incorporating PHP arrays into JavaScript code within a PDO environment

I'm facing an issue trying to incorporate a PHP array into my JS code and I'm not sure how to resolve it. I found this example (I'm using PDO, not mysqli): Inserting MYSQL results from PHP into Javascript Array $pdo = new PDO('mysql:h ...

javascriptphpjquerymysqlpdo

Is it feasible to capture a screenshot of a URL by using html2canvas?

Is it possible to take a screenshot of a specific URL using html2canvas? For example, if I have the following URLs: mydomain.com/home mydomain.com/home?id=2 mydomain.com/home/2 How can I capture and display the screenshot image on another page? window ...

javascriptjqueryhtmlcsshtml2canvas

Consistent integration into React component

I'm currently working on an application using the React library, but my current challenge lies within JavaScript ES6 itself. Within a component (page) that I've created, I have implemented a custom Floating Action Button (FAB): class Page exten ...

javascriptreactjsnode-moduleses6-modules

Content in Slider Exceeding Container Bounds

After successfully creating a slider using jQuery with the help of some Stack Overflow users, everything was working perfectly. However, when attempting to change the layout of the slider, it somehow broke and now all slides are being pushed out of the con ...

jqueryhtmlcss

Identifying when a fetch operation has completed in vue.js can be accomplished by utilizing promises

Currently, I am facing a dilemma in my Vue.js application. I am making an API call within the created() hook, but there are certain tasks that I need to trigger only after the API call has been completed. The issue is that this API call usually takes aroun ...

javascriptvue.js

display a dropdown menu with a default selection

Trying to pre-select a value in a dropdown from database but facing issues. Need assistance in resolving this problem. HTML <select class="form-control" ng-model="reportType.consolidationScopeId"> <option value="">Please select</option& ...

javascriptangularjs

Add an HTML template tag in Vuetify using scripting

This is my current template tag: <template> <h1>Explore in VR</h1> </template> Within my script tag, I've included the following code: var viewer = new AFrame.WebVRViewer(); viewer.setSize(window.innerWidth, window.innerHeig ...

javascriptvue.jsvuetify.js

Challenge with modifying CSS variable names in Angular SSR

Recently, I noticed that some of my CSS variable names are being changed to something else on the server-side rendering build, causing them not to work as expected. An example of this is: .color-black-75 { color: var(--black-75-color); } In my styles. ...

cssangular

Implementing a transition effect to the drawimage function

I am currently working on implementing a transition effect for an image inside a canvas element. I have provided a snippet below to demonstrate my progress so far. Can anyone guide me on how to incorporate a transition animation for the image within the c ...

javascriptreactjscanvashtml5-canvas

Using EJS to Render a Function Expression?

Has anyone been able to successfully render a function call in express using EJS? Here's what I've tried so far: res.render("page", { test: test() }); Can someone confirm if this is possible, or provide guidance on how to call a function fr ...

javascriptnode.jsexpressejsserver-side-rendering

Issue with jQuery selector not updating when variable changes

'I am attempting to create a functionality where a function is triggered upon clicking the "hit" class, but only when the correct parent "box" id is selected. var currentSelection = 1; $('#box-' + currentSelection + ' .hit'). ...

javascriptjquery

update/renew angularjs unique directive

Incorporating the carousel plugin from Ionic Market into my ionic project has been a game changer. This specific plugin, known as Morph Carousel, is a custom AngularJS directive that allows me to display content in a visually appealing way. One unique as ...

javascriptangularjsangularjs-directiveionic-frameworkangular-directive

Is it possible to access the passed arguments in the test description using jest-each?

Utilizing TypeScript and Jest, consider this sample test which can be found at https://jestjs.io/docs/api#testeachtablename-fn-timeout it.each([ { numbers: [1, 2, 3] }, { numbers: [4, 5, 6] } ])('Test case %#: Amount is $numbers.length =&g ...

javascripttypescriptunit-testingjestjsts-jest

Hold off on running the code until the image from the AJAX request is fully loaded and

Currently, I am facing a challenge with my code that aims to determine the width and height of a div only after it has been loaded with an image from an AJAX request. The dimensions of the div remain 0x0 until the image is successfully placed inside it, c ...

javascriptajax