Button in pricing-table Codeigniter

Asked

Viewed 43 times

0

I have a code that shows pricing-table in my View. Each one has a javascript button that when you click on it you need to open another view where you have the details of each pricing-table. How can I make each button when clicking appear different writing. Ex: If you click the first button, it opens a view with only a title, and when I click the 2 button it opens a view with a title and text. My code uses bootstrap and is in Codeigniter

View:

<div class="col-sm-12">
            <div class="well well-light">
                <h1>Planos, <small>4 Planos</small></h1>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-3">
                        <div class="panel panel-teal pricing-big">
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    Personal Project
                                </h3>
                            </div>
                            <div class="panel-body no-padding text-align-center">
                                <div class="the-price">
                                    <h1>
                                        $99<span class="subscript">/ mo</span>
                                    </h1>
                                </div>
                                <div class="price-features">
                                    <ul class="list-unstyled text-left">
                                        <li><i class="fa fa-check text-success"></i> 2 years access <strong> to all storage locations</strong></li>
                                        <li><i class="fa fa-check text-success"></i> <strong>Unlimited</strong> storage</li>
                                        <li><i class="fa fa-check text-success"></i> Superbig <strong> download quota</strong></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="panel-footer text-align-center">
                                <button id="plano_1" class="btn btn-primary btn-block">
                                    Contratar <span>plano</span>
                                </button>
                                <div>
                                    <a href="javascript:void(0);"><i>We accept all major credit cards</i></a>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="col-xs-12 col-sm-6 col-md-3">
                        <div class="panel panel-primary pricing-big">
                            <div class="panel-heading">
                                <h3 class="panel-title">
                                    Developer Bundle
                                </h3>
                            </div>
                            <div class="panel-body no-padding text-align-center">
                                <div class="the-price">
                                    <h1>
                                        $350<span class="subscript">/ mo</span>
                                    </h1>
                                </div>
                                <div class="price-features">
                                    <ul class="list-unstyled text-left">
                                        <li><i class="fa fa-check text-success"></i> 2 years access <strong> to all storage locations</strong></li>
                                        <li><i class="fa fa-check text-success"></i> <strong>Unlimited</strong> storage</li>
                                        <li><i class="fa fa-check text-success"></i> Superbig <strong> download quota</strong></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="panel-footer text-align-center">
                                <button id="plano_2" class="btn btn-primary btn-block">Contratar <span>plano</span></button>
                                <div>
                                    <a href="javascript:void(0);"><i>We accept all major credit cards</i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
    $("#plano_1").on('click', function () {
        window.location = ('<?= base_url('index#ConPla/verPla1') ?>/');
    });
    $("#plano_2").on('click', function () {
        window.location = ('<?= base_url('index#ConPla/verPla1') ?>/');
    });
</script>
  • Will it by any chance open a new page? If yes, because it does not make a normal link?

  • @Marcelodiniz will click on the page itself will only change the View.

  • Is this Conpla a controller? Try to get the index#

  • @Marcelodiniz I had placed without the index, but when I clicked on the button I just pressed the page, taking out the menu and other options that need to remain there. With the index it will change only the "middle of the page, keeping its pattern.

  • can put an example in jsfiddle or something like that?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.