Expand Bootstrap Accordion when valid data is entered in JavaScript

Last Reply 26 days ago By dharmendr

Posted 26 days ago

i have got the project to create a form in which there should be 3 accordian ..in first accordian there should be name and address and the 2nd and 3rd accordian should not be open unless the first accordian values are enetered properly

<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
 
<h2>Active Accordions</h2>
<p>In this example we add the w3-red class to an active accordion (when the button is clicked on and the content is opened).</p>
 
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-black w3-left-align">Open Section 1</button>
<div id="Demo1" class="w3-hide w3-container">
    <p><input type="text" >name</p>
     <p><input type="text" >password</p>
</div>
 
<button onclick="myFunction('Demo2')" class="w3-button w3-block w3-black w3-left-align">Open Section 2</button>
<div id="Demo2" class="w3-hide w3-container">
    <p>Some other text..</p>
</div>
 
</div>
<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className =
        x.previousElementSibling.className.replace("w3-black", "w3-red");
    } else {
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className =
        x.previousElementSibling.className.replace("w3-red", "w3-black");
    }
}
</script>
 
</body>
</html>

 

You are viewing reply posted by: dharmendr 26 days ago.
Posted 26 days ago

Hi v@run,

Check the below code.

HTML

<div class="accordion" id="dvAccordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle btn btn-primary" data-toggle="collapse" data-parent="#accordion2"
                href="#collapseOne">Item #1 </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                <p>
                    <input id="txtName" type="text" onchange="return myFunction()" />name</p>
                <p>
                    <input id="txtPwd" type="text" onchange="return myFunction()" />password</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle btn btn-primary" data-toggle="collapse" data-parent="#accordion2"
                href="#collapseTwo">Item #2 </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>
                    Some other text..</p>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    function myFunction() {
        var name = document.getElementById('txtName');
        var password = document.getElementById('txtPwd');
        var collapseOne = document.getElementById('collapseOne');
        var collapseTwo = document.getElementById('collapseTwo');

        if (name.value.length > 0 && password.value.length) {
            collapseOne.className = "accordion-body collapse";
            collapseTwo.className = "accordion-body collapse in";
        } else {
            collapseOne.className = "accordion-body collapse in";
            collapseTwo.className = "accordion-body collapse";
        }
    }
</script>

Demo