Steps to ensure my collapsible is open from the start

Is there a way to have the collapsible content open by default without much hassle? I'm a bit lost here and could use some guidance.

I must confess, I'm not very familiar with this, so hopefully, it's not too complicated.

While my question may seem simple, I feel the need to elaborate more to make sure everything is covered.

Below is the code snippet in question:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible3 {
  background-color: #FF5757;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 50%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.active, .collapsible3:hover {
  background-color: #FF6868;
}
// more styles...
</style>

<button class="collapsible3">Button</button>
<div class="content3">
    <p> </p>
    <p style="font-size: 16px; text-indent: 20px;">Content</p>
</div>
// more HTML...

Answer №1

I made some adjustments to the if condition within the script tag

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button class="accordion" ng-click="">
        <b>SEARCH BY MONTH</b></button>
    <div class="panel" style="background-color: red; height: 150px">
        <!--<p>
                                <label for="amount">Month range:</label>
                            </p>-->
        <input type="text" id="amount" readonly style="border: 0; color: #f6931f; font-weight: bold;
            width: 100%">
       
        <br />
        <!--Start DateTime : <span id="lblStartDateTime"></span><br />
                            End DateTime : <span id="lblEndDateTime"></span>-->
    </div>
    <hr />
  
</body>
</html>

JS:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click",function () {
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");
        /* Toggle between hiding and showing the active panel */
        var panel1 =this.nextElementSibling;
        if (panel1.style.display ==="block") {
            panel1.style.display ="none";
        }else {
            panel1.style.display ="block";
        }
    });
}

Check out the live demo

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

There is currently no user present - utilize getServerSideProps in Next JS combined with AWS Amplify

I want to implement a user-authenticated GraphQL request on the serverside within the getServerSideProps function using AWS Amplify and Next JS. In my AWS Database, only users who are the designated owners of the document should be able to access the data ...

The iframe is set to take the source URL from url.com/id using the "id" parameter

Currently, I am attempting to set the src of an iframe by extracting the URL from the toolbar address. The URL consists of the domain plus an ID, which happens to be the same as the YouTube ID. For instance: www.youtube.com/watch=id In my case, my domain ...

In my Vue watch method, I have two parameters specified, and one of them remains constant without any changes

Currently, I am attempting to access a method within my watch function with two parameters. Here is the code snippet for the method: onBoolianChange(value, willChange) { willChange = (value === false) ? true : false; }, watch: { "e ...

Tips for effectively handling requestAnimationFrame

I created a unique function that both scrambles and translates text. The functionality is smooth if you patiently wait for the animation to finish before moving the mouse over to other elements. However, if you try to rush through to the next one, the prev ...

Creating dynamic class fields when ngOnInit() is called in Angular

I am trying to dynamically create variables in a class to store values and use them in ngModel and other places. I understand that I can assign values to variables in the ngOnInit() function like this: export class Component implements OnInit{ name: st ...

Aligning an SVG within a container div

I am trying to display an SVG image inside a fixed-position div. Here is the HTML: <div class="main"> <svg class="svg" viewBox="0 0 180 100"> <rect height="100%" width="100%" fill="#003300"></rect> </svg> </div> ...

Can you please identify the TypeScript type associated with the return value of the match() method in String prototype?

I need help with creating a Regex in JavaScript const pattern = /S(\d+)E(\d+)/; // identifying characters between "S" and "D" const result = 'SE01E09'.match(pattern); How should I declare the result variable? I have attempted various ...

Employ an asynchronous immediately-invoked function expression within the callback

Can an asynchronous IIFE be used inside the callback function to avoid the error message "Promise returned in function argument where a void return was expected"? You can find an example here. signIn(email: string, password: string, course?: ICourse): ...

Executing the OnChange event of the "Select" feature in Delphi with WebBrowser

In my Delphi project, I am using the WebBrowser component to navigate a HTML page that contains a ComboBox. Is there a way to trigger the OnChange event of the ComboBox? Here is how the ComboBox is structured: <select name="comboname" onchange="Some J ...

Ways to customize the appearance of CSS bootstrap 'col' elements?

I'm attempting to customize the styling of bootstrap CSS columns col-xl in order to display 5 or 6 cards/tiles on my webpage instead of just 4 (refer to attached image) without interfering with the other grid layouts. Unfortunately, I am currently str ...

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

What is the best way to delete a specific item class from a child element using CSS and React?

I am looking for a solution to remove a class or its effect if the parent element does not have a "thanks" element, or have the option to refer to its reference to enable selection. I have been searching online without success and need some suggestions. Th ...

Guide to iterating through a JSON object

Initially, I expected a simple question but it's proving to be more challenging than I thought. To provide some context, there is a JSON string returned from the server located within data.occupation. {"occupation": "Boxer", "id": 2},{"occupation": " ...

Performing an AJAX POST request in Laravel

I'm struggling with getting this ajax call to work, and I can't seem to figure out what's going wrong. View (html) <div class="col-sm-6 col-xs-3 pl0" style="margin-left: -5px;"> <button class="btn btn-primary visible-xs" n ...

Is Next.js Dynamic Routing Failing You?

Recently, I attempted to implement Dynamic routing for a recipe app but encountered an issue where the page was not found. This problem has left me puzzled as I am fairly inexperienced with TypeScript, although not with React. // pages/recipes/[recipeId].t ...

I am unable to implement code coverage for Cypress in Debian at the moment

Having trouble obtaining code coverage results using Cypress in my Virtual Machine (Debian Bullseye), but no issues when I run the same project on my Windows machine. On Linux, the code coverage shows up as: Click here to view Index.html inside lcov-repor ...

Guide for integrating the shadcn/ui Range Date Picker within a Form

Encountering an issue with using The Range Date Picker within the Form component. Specifically, I am looking to store {from, to} values of the range in an object, however, utilizing an object as a Form field value results in error messages not functioning ...

Angular formly - Enhancing User Input Focus

I have created a field wrapper that converts normal text into an input when hovered over with the mouse. Additionally, I have a directive that sets focus on the field when it is activated. Now, I am looking for a solution where the field remains open as l ...

Deleting a property once the page has finished loading

My issue is a bit tricky to describe, but essentially I have noticed a CSS attribute being added to my div tag that seems to come from a node module. The problem is, I can't seem to find where this attribute is coming from in my files. This attribute ...

Tips for indicating errors in fields that have not been "interacted with" when submitting

My Angular login uses a reactive form: public form = this.fb.group({ email: ['', [Validators.required, Validators.email]], name: ['', [Validators.required]], }); Upon clicking submit, the following actions are performed: ...