jquery - Change Bootstrap Tab animation and css -


i have bootstrap tab in html , working fine. here need change effect of bootstrap tab. when user click on tab tab opened.

<html>      <head>          <meta charset="utf-8">         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>      </head>                        <body>                    <div class="col-md-6 col-sm-6 col-xs-12" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> </div>                              <div class="col-md-6   col-sm-6 col-xs-12">                               <div class="panel-group" id="accordion">                      <div class="panel panel-default panel1">                        <div class="panel-heading">                          <h4 class="panel-title">                            <a data-toggle="collapse" id="tab1" data-parent="#accordion" href="#collapse1">tab1                        ></a>                          </h4>                        </div>                        <div id="collapse1" class="panel-collapse collapse in">                          <div class="panel-body">lorem ipsum dolor sit amet, consectetur adipisicing elit,                          sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>                        </div>                      </div>                      <div class="panel panel-default">                        <div class="panel-heading">                          <h4 class="panel-title">                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">tab2                        ></a>                          </h4>                        </div>                        <div id="collapse2" class="panel-collapse collapse">                          <div class="panel-body">lorem ipsum dolor sit amet, consectetur adipisicing elit,                          sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>                        </div>                      </div>                      <div class="panel panel-default">                        <div class="panel-heading">                          <h4 class="panel-title">                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">tab3                        ></a>                          </h4>                        </div>                        <div id="collapse3" class="panel-collapse collapse">                          <div class="panel-body">lorem ipsum dolor sit amet, consectetur adipisicing elit,                          sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>                        </div>                      </div>                                                  <div class="panel panel-default">                        <div class="panel-heading">                          <h4 class="panel-title">                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">tab4                        ></a>                          </h4>                        </div>                        <div id="collapse4" class="panel-collapse collapse">                          <div class="panel-body">lorem ipsum dolor sit amet, consectetur adipisicing elit,                          sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>                        </div>                      </div>                    </div>                    </div>                                    </body>  </html>

this js fiddle https://jsfiddle.net/felixtm/nozp2pge/2/

i want change effect , style of bootstrap tab following images

this first image enter image description here .

when user click on tab1 ( second image) enter image description here

what need tab right side arrow needed first image . when click on tab entire tab view replaced corresponding tab content of animation button (like second image). when user click on button entire tab(first image ) need show again.

for write code not completed , not perfect 

<script>         $("#tab1").on("click",function(){              $(".panel").hide();             $(".panel1").show();         });  </script>

please resolve .

all of can done using css pseudo-elements. 

selector:pseudo-element {   property: value; }

you should try use css before javascript or jquery if css job. add class collapsed headings , style accordingly.

notice how added collapsed class section headers have panels collapsed default.

<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">tab2</a>

then styled headings using css

.panel-title {   display: block;   text-align: center; } .panel-title a:active, .panel-title a:focus, .panel-title a:hover {   text-decoration: none; } .panel-title a:before {   content: "<";   position: absolute;   left: 30px; } .panel-title a.collapsed {   text-align: left; } .panel-title a.collapsed:before {   content: ""; } .panel-title a.collapsed:after {   content: ">";   position: absolute;    right: 30px; }

here's updated fiddle i'm talking https://jsfiddle.net/yongchuc/nozp2pge/4/.

edited

ah, ok. understand now. accomplish this, need jquery , want check heading being clicked , hide panel's siblings.

$(function () {   $('.panel-title a').on('click', function () {     $(this).closest('.panel').siblings().toggle();   }); });

.toggle() used shows other panels when heading clicked again.

i've added collapsed class first heading that panel hidden, in first picture above. here's updated fiddle these changes review. https://jsfiddle.net/yongchuc/nozp2pge/5/


Comments

Post a Comment

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more