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

Move the button text back to its original position with animation

I have a button with text that shifts to the right by 15px when hovered over. However, when the cursor is removed, the text immediately snaps back instead of smoothly transitioning back to its original position. I tried setting the ease-in-out property but ...

htmlcss

Converting HTML tables into arrays

I have JSON content that needs to be transformed into an array, specifically from a HTML table with cell values. Those cells should be combined into a single array for further use in the project. Struggling with the conversion of cell values into an arra ...

javascriptjqueryarraysjson

Strategies for transmitting computed variables from a controller to JavaScript once the computation is complete?

Within my application, I have a button that triggers an action called "method" present in the UserController. This particular action involves executing some specific tasks. def method ***performing necessary calculations and operations*** @my_variable ...

javascriptruby-on-railsrubyruby-on-rails-4

Issue: $controller:ctrlreg The controller named 'HeaderCntrl' has not been properly registered

I am encountering an error while working on my AngularJS program. I have defined the controller in a separate file but it keeps saying that the controller is not registered. Can someone please help me understand why this issue is happening? <html n ...

javascriptangularjscontroller

Tips for aligning div columns in HTML and CSS

My divs are displaying different heights based on content. I need a solution to make them all the same height without using bootstrap framework. Is there a way to achieve this with plain html/css, or perhaps with javascript/jquery/angularjs? Take a look ...

htmlcss

Insert an HTML page into a div element

I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...

javascriptjqueryhtmlangularjs

Remove attributes from a collection of objects

Here is an array of objects: let array = [{ firstName: "John", lastName : "Doe", id:5566, weight: 70 },{ firstName: "Francis", lastName : "Max", id:5567, weight: 85 }]; I am looking to remove the properties "lastName" and "weight" for all obj ...

javascriptarraysobjectjavascript-objects

Issue with pop up window causing button click event to malfunction

I am facing an issue where the button click event works fine outside of a pop-up window but does not fire when inside the pop-up window. In my HTML code, the part that calls the button event outside of the pop-up window works perfectly, but inside the pop- ...

javascriptc#jqueryasp.net

My goal is to design a dynamic textbox for a website that allows users to customize the text in any format they desire

I want to create a versatile textbox on my website that allows users to change the text format as they desire. Unfortunately, I am facing some issues with implementing this feature. Here is the code I have developed so far. <body> <h1>< ...

javascripthtml

Looking to develop a dynamic JSON preview feature using AngularJS

Below is an example of JSON data: data: [{ test: { innertest: "2345", outertest: "abcd" }, trans: { sig: "sou", trip: [{ one: "2" }, { two: "3" }], otherac: "iii" },{ test: { innertest: "uuu", ...

javascriptjqueryangularjsjson

I'm interested in knowing how to switch between two functions using Angular

I have developed a grocery list application where each row contains the name of a food item. The layout includes a left column for items that are not needed and a right column for items that are needed. Currently, I am able to change the state by clicking ...

javascriptangular

Issue with integrating Google Spreadsheet as the data source for a Next.JS website: updates are not reflecting on the website pages

The website for this restaurant was created by me, using Google Spreadsheet to populate the menu pages. I chose this method for its simplicity and familiarity to the client. I'm utilizing the google-spreadsheet package to extract necessary informatio ...

javascriptreactjsnext.jsgoogle-sheets-api

How can I prevent a browser from caching a CSS file when the file is updated?

I have a primary layout file that is utilized in the majority of views. Within this layout, I am integrating a module using the Grails resources plugin. <r:require module="core"/> The definition of modules can be found in the conf/ApplicationResour ...

cssgrailsgrails-resources-plugin

Substitute all instances of <table> with <div> tags, making sure to include specifications for

Currently, I find myself immersed in a project that relies heavily on tables, which isn't exactly ideal but is what the marketing department insists upon... To tackle this issue, I have implemented jQuery to convert all tables into DIVs, and so far, ...

javascripthtmlhtml-table

passing commands from a chrome extension to a content script

I want to set up a hotkey that will activate a function in my content script. The content script (main.js) is run when the page loads from my popup.js file. I've included the command in my manifest.json and I can see in the console log that it is tri ...

javascripthtmlgoogle-chrome-extensionsendmessagecontent-script

Access a PHP file using XMLHttpRequest to run additional JavaScript code

My main page, referred to as Main.php, contains a button that triggers the display of results from Results.php within a div (divResults) on Main.php. The HTML content "These Are The Results" returned by Results.php is successfully displayed in the divResu ...

phpjavascriptajaxhttprequestactivexobject

The appended button remains unresponsive when clicked

After conducting extensive research, I have come across numerous questions on overflow regarding a specific issue, but none of the solutions seem to work. The problem revolves around a button that appears on the page when another element is clicked. The u ...

jqueryhtmlappend

When attempting to execute a query in Node using oracledb, an error with the code 'npm ERR! errno 3221225477' occurred

Encountered the following error message in the command line: npm ERR! code ELIFECYCLE npm ERR! errno 3221225477 npm ERR! [email protected] start: `node ./bin/www` npm ERR! Exit status 3221225477 npm ERR! npm ERR! Failed at the [email protected] start sc ...

javascriptnode.jsexpressnpmnode-oracledb

In AngularJS, how can you filter the ng-repeat value by clicking on a checkbox field?

Hey there, I'm looking to filter the ng-repeat value when a checkbox is clicked. Check out my Plunker here. By checking the checkbox labeled Role block, it should only show elements with roles value of "block". Similarly, by checking the checkbo ...

htmlangularjsmeanjs

"Although Vuex data is present, an error is being logged in the JavaScript console

I'm utilizing Vuex to retrieve data from a URL and I need to use this data in computed properties in Vue.js. What could be causing the issue? <script> import {mapGetters, mapActions} from "vuex"; computed: { ...mapGetters(["ON ...

javascriptvue.jsvuex