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 properlylthtmlgtlttitlegtW3CSSlttitlegtltmeta name34viewport34 content34widthdevicewidth initialscale134gtltlink rel34stylesheet34 href34httpswwww3schoolscomw3css4w3css34gtltbodygtltdiv class34w3con

Hi vrunCheck the below codeHTMLltdiv class34accordion34 id34dvAccordion34gt ltdiv class34accordiongroup34gt ltdiv class34accordionheading34gt lta class34accordiontoggle btn btnprimary34 datatoggle34collapse34 dataparent34accordion234 href34collapseOne34gtItem 1 ltagt ltdivgt ltdiv id34collapseOne34 class34accordionbody collapse in34gt ltdiv class34accordioninner34gt ltpgt ltinput id34txtName34 type34text34 onchange34return myFunction34 gtnameltpgt ltpgt ltinput id34txtPwd34 type34text34 onchange34return myFunction34 gtpasswordltpgt ltdivgt ltdivgt ltdivgt ltdiv class34accordiongroup34gt ltdiv class34a

Expand Bootstrap Accordion when valid data is entered in JavaScript

v@run

SOLVED CLOSED ACTIVE ANSWERED
User: v@run
Posted: on Oct 25, 2018 05:03 AM
Forum: Bootstrap
Answer: 1
Views: 2746

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>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Oct 25, 2018 08:18 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Expand Bootstrap Accordion when valid data is entered in JavaScript

Company

Explore

Follow us

Contact Us