Hi guys,
I know this sounds like a silly and noub question!?..
But im struggling alot on, how to handle accordions in Slim3
Since the value of the href tag is normally being sent to the header, and in Slim we are dealing with routes…
Anyone care to join or enlighten me?
Br Stefan
<div class="panel-group checkout-steps" id="accordion">
<!-- checkout-step-01 -->
<div class="panel panel-default checkout-step-01">
<!-- panel-heading -->
<div class="panel-heading">
<h4 class="unicase-checkout-title">
<a data-toggle="collapse" class="" data-parent="#accordion" href="#collapseOne">
<span>1</span>Checkout Method
</a>
</h4>
</div>
<!-- panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in">
<!-- panel-body -->
<div class="panel-body">
<div class="row">
<!-- guest-login -->
<div class="col-md-6 col-sm-6 guest-login">
<h4 class="checkout-subtitle">Checkout as a Guest or Register Login</h4>
<p class="text title-tag-line">Register with us for future convenience:</p>
<!-- radio-form -->
<form class="register-form" role="form">
<div class="radio radio-checkout-unicase">
<input id="guest" type="radio" name="text" value="guest" checked>
<label class="radio-button guest-check" for="guest">Checkout as Guest</label>
<br>
<input id="register" type="radio" name="text" value="register">
<label class="radio-button" for="register">Register</label>
</div>
</form>
<!-- radio-form -->
<h4 class="checkout-subtitle outer-top-vs">Register and save time</h4>
<p class="text title-tag-line ">Register with us for future convenience:</p>
<ul class="text instruction inner-bottom-30">
<li class="save-time-reg">- Fast and easy check out</li>
<li>- Easy access to your order history and status</li>
</ul>
<button type="submit" class="btn-upper btn btn-primary checkout-page-button checkout-continue ">Continue</button>
</div>
<!-- guest-login -->
<!-- already-registered-login -->
<div class="col-md-6 col-sm-6 already-registered-login">
<h4 class="checkout-subtitle">Already registered?</h4>
<p class="text title-tag-line">Please log in below:</p>
<form class="register-form" role="form">
<div class="form-group">
<label class="info-title" for="exampleInputEmail1">Email Address <span>*</span></label>
<input type="email" class="form-control unicase-form-control text-input" id="exampleInputEmail1" placeholder="admin@gadgets.com">
</div>
<div class="form-group">
<label class="info-title" for="exampleInputPassword1">Password <span>*</span></label>
<input type="password" class="form-control unicase-form-control text-input" id="exampleInputPassword1" placeholder="Password">
<a href="#" class="forgot-password">Forgot your Password?</a>
</div>
<button type="submit" class="btn-upper btn btn-primary checkout-page-button">Login</button>
</form>
</div>
<!-- already-registered-login -->
</div>
</div>
<!-- panel-body -->
</div><!-- row -->
</div>
<!-- checkout-step-01 -->
<!-- checkout-step-02 -->
<div class="panel panel-default checkout-step-02">
<div class="panel-heading">
<h4 class="unicase-checkout-title">
<a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseTwo">
<span>2</span>Billing Information
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
TEXT
</div>
</div>
</div>
<!-- checkout-step-02 -->
<!-- checkout-step-03 -->
<div class="panel panel-default checkout-step-03">
<div class="panel-heading">
<h4 class="unicase-checkout-title">
<a data-toggle="collapse" class="collapsed" data-parent="#accordion" href="#collapseThree">
<span>3</span>Shipping Information
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
TEXT
</div>
</div>
</div>
<!-- checkout-step-03 -->
</div><!-- /.checkout-steps -->I think this is not a Slim 3 specific question, because Slim 3 (PHP) is running on server-side and not client-side.
Hi Odan,
Im not sure exactly what to think of your reply ?! If somebody needs help in achieving something in Slim, won’t you say it’s related enough to ask for help with? And especially in a forum like this?
Personally, i think its a good question since I have no trouble in achieving the above with other frameworks, but i can’t in Slim!
Had I asked for something related to lets say apache, then perhaps your reply would be valid !? But here, i honestly really dont know what to think of your reply… But perhaps im totally wrong here?
In what way is Slim responsible for the accordion behaviour?
The only thing you need to do it add the required anchors and
use some javascript to visually expand/collapse it.
Hi Stjo,
your question is perfectly fine. Just let me explain it a litte bit more.
Neither the webserver (e. g. Apache), nor PHP, nor Slim nor any other server-side web framework will be able to get the fragment identifier (without the help of JavaScript and Ajax).
Fragments are evaluated by the client (Web browser). Clients are not supposed to send URI-fragments to servers when they retrieve a document, and without help from a local application (JavaScript) fragments do not participate in HTTP redirections.
In JavaScript, the fragment identifier of the current HTML page can be accessed in the “hash” property location.hash.
What other frameworks do you mean exactly? React, Vue, Angular?
Nobody said anything about Slim being responsible for accordion behavior !! I just simply asked for help…