How to achieve accordion functionality in this?

59
April 16, 2021, at 10:20 AM

I am trying to achieve bootstrap accordion like functionality in this code, what I want is one collapse should hide when other one opens. I am using bootstrap 3.3.7. I have not tried anything except for adding bootstrap classes in it. Also if possible the required solution should be in bootstrap. I know there is something related to panel/accordion but I am unable to figure out.

    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-md-12">
                <div class="row-title">Our Services</div>
            </div>
        </div>
     <div id="accordion" class="panel-group">  
        <div class="row">
            <ul class="nav navbar-nav navbar-nav-centered index-ourServices-ul">
                <li class="nav-item index-ourServices-li col-md-3 panel">
                    <a class="row-title nav-link" data-toggle="collapse" data-parent="#accordion" data-target="#first_service" >Our Services</a>
                </li>
                <li class="nav-item index-ourServices-li  col-md-3 ">
                    <div class="row-title nav-link">Our Services</div>
                </li>
                <li class="nav-item index-ourServices-li  col-md-3 panel">
                    <a class="row-title" data-toggle="collapse"  data-parent="#accordion" data-target="#second_service">Our Services</a>
                </li>
                <li class="nav-item index-ourServices-li  col-md-3">
                    <div class="row-title">Our Services</div>
                </li>
            </ul>
        </div>
        <div class="accordion-group">
<!------------------------here-------------------->        
          <div class="row custom-padding panel-collapse collapse in" id="first_service">
            <div class="col-sm-6 col-md-3">
                <div class="pricing-box">
                    <div class="pricing-title">First Service</div>
                    <div class="pricing-icon">
                        <div class="icon"><img src="images/server1.svg" alt=""></div>
                    </div>
                    <div class="pricing-details">
                        <ul>
                            <li>User-friendly building tools</li>
                            <li>Host unlimited domains</li>
                            <li>Perfect for small sites/blogs</li>
                        </ul>
                    </div>
                    <div class="pricing-price">
                        <div class="price-info">Starting at only</div>
                        <div class="price">
                            <span class="currency">$</span><span class="num">2.75</span><span class="duration">/mo</span>
                        </div>
                    </div>
                    <div class="pricing-button">
                        <a href="webhosting.html">Get Started!</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="pricing-box">
                    <div class="pricing-title">Wordpress Hosting</div>
                    <div class="pricing-icon">
                        <div class="icon"><img src="images/server4.svg" alt=""></div>
                    </div>
                    <div class="pricing-details">
                        <ul>
                            <li>Host up to 2 websites</li>
                            <li>Experience faster load times</li>
                            <li>Easy to use WP control panel</li>
                        </ul>
                    </div>
                    <div class="pricing-price">
                        <div class="price-info">Starting at only</div>
                        <div class="price">
                            <span class="currency">$</span><span class="num">5.34</span><span class="duration">/mo</span>
                        </div>
                    </div>
                    <div class="pricing-button">
                        <a href="wordpresshosting.html">See Plans</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="pricing-box">
                    <div class="pricing-title">Cloud Hosting</div>
                    <div class="pricing-icon">
                        <div class="icon"><img src="images/server2.svg" alt=""></div>
                    </div>
                    <div class="pricing-details">
                        <ul>
                            <li>Up to 2X Faster</li>
                            <li>4X More Scalable</li>
                            <li>Intuitive Dashboard</li>
                        </ul>
                    </div>
                    <div class="pricing-price">
                        <div class="price-info">Starting at only</div>
                        <div class="price">
                            <span class="currency">$</span><span class="num">7.99</span><span class="duration">/mo</span>
                        </div>
                    </div>
                    <div class="pricing-button">
                        <a href="cloudhosting.html">Know more</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="pricing-box">
                    <div class="pricing-title">VPS Hosting</div>
                    <div class="pricing-icon">
                        <div class="icon"><img src="images/server3.svg" alt=""></div>
                    </div>
                    <div class="pricing-details">
                        <ul>
                            <li>Dedicated Control</li>
                            <li>Full Root Access</li>
                            <li>Scalable Resources</li>
                        </ul>
                    </div>
                    <div class="pricing-price">
                        <div class="price-info">Starting at only</div>
                        <div class="price">
                            <span class="currency">$</span><span class="num">20.40</span><span class="duration">/mo</span>
                        </div>
                    </div>
                    <div class="pricing-button">
                        <a href="vpshosting.html">Get Started!</a>
                    </div>
                </div>
            </div>
        </div>              
<!------------------------------>
        <div class="row custom-padding panel-collapse collapse" id="second_service">
            <div class="col-sm-6 col-md-3">
                <div class="pricing-box">
                    <div class="pricing-title">Second Service</div>
                    <div class="pricing-icon">
                        <div class="icon"><img src="images/server1.svg" alt=""></div>
                    </div>
                    <div class="pricing-details">
                        <ul>
                            <li>User-friendly building tools</li>
                            <li>Host unlimited domains</li>
                            <li>Perfect for small sites/blogs</li>
                        </ul>
                    </div>
                    <div class="pricing-price">
                        <div class="price-info">Starting at only</div>
                        <div class="price">
                            <span class="currency">$</span><span class="num">2.75</span><span class="duration">/mo</span>
                        </div>
                    </div>
                    <div class="pricing-button">
                        <a href="webhosting.html">Get Started!</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="pricing-box">
                    <div class="pricing-title">Yes</div>
                    <div class="pricing-icon">
                        <div class="icon"><img src="images/server4.svg" alt=""></div>
                    </div>
                    <div class="pricing-details">
                        <ul>
                            <li>Host up to 2 websites</li>
                            <li>Experience faster load times</li>
                            <li>Easy to use WP control panel</li>
                        </ul>
                    </div>
                    <div class="pricing-price">
                        <div class="price-info">Starting at only</div>
                        <div class="price">
                            <span class="currency">$</span><span class="num">5.34</span><span class="duration">/mo</span>
                        </div>
                    </div>
                    <div class="pricing-button">
                        <a href="wordpresshosting.html">See Plans</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="pricing-box">
                    <div class="pricing-title">Cloud Hosting</div>
                    <div class="pricing-icon">
                        <div class="icon"><img src="images/server2.svg" alt=""></div>
                    </div>
                    <div class="pricing-details">
                        <ul>
                            <li>Up to 2X Faster</li>
                            <li>4X More Scalable</li>
                            <li>Intuitive Dashboard</li>
                        </ul>
                    </div>
                    <div class="pricing-price">
                        <div class="price-info">Starting at only</div>
                        <div class="price">
                            <span class="currency">$</span><span class="num">7.99</span><span class="duration">/mo</span>
                        </div>
                    </div>
                    <div class="pricing-button">
                        <a href="cloudhosting.html">Know more</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="pricing-box">
                    <div class="pricing-title">VPS Hosting</div>
                    <div class="pricing-icon">
                        <div class="icon"><img src="images/server3.svg" alt=""></div>
                    </div>
                    <div class="pricing-details">
                        <ul>
                            <li>Dedicated Control</li>
                            <li>Full Root Access</li>
                            <li>Scalable Resources</li>
                        </ul>
                    </div>
                    <div class="pricing-price">
                        <div class="price-info">Starting at only</div>
                        <div class="price">
                            <span class="currency">$</span><span class="num">20.40</span><span class="duration">/mo</span>
                        </div>
                    </div>
                    <div class="pricing-button">
                        <a href="vpshosting.html">Get Started!</a>
                    </div>
                </div>
            </div>
            </div>
           </div>     
        </div>    
    </div>
READ ALSO
How to save the frames of video on Local Disk?

How to save the frames of video on Local Disk?

I am extracting frames from video , it is extracting and displaying all the frames on canvas means on the web browserI am trying to save that frame on disk using local-storage

22
Regex: match string followed by dot/comma followed by space

Regex: match string followed by dot/comma followed by space

i want to turn my text = "hello this is me, and only mebe carefull from 911

57
Uncaught Error: Call to a member function prepare() on null. Can someone please help me with these? [closed]

Uncaught Error: Call to a member function prepare() on null. Can someone please help me with these? [closed]

Want to improve this question? Update the question so it's on-topic for Stack Overflow

72