Show Hide DIV based on selected Bootstrap Group Button using jQuery

firoz198...

SOLVED CLOSED ACTIVE ANSWERED
User: firoz1986
Posted: on Sep 16, 2015 02:33 AM
Forum: Bootstrap
Answer: 1
Views: 15927

Hi, I am using bootstrap 3.5 version, there are three buttons 'Oneway,Return,Multi City' and onclick i want to show/hide div. how to achieve it? if i am not using 'data-toggle="buttons"' it is working but i want to use this data-toggle="buttons".

here is html:

 <div class="btn-group col-md-12" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" id="q156" name="quality[25]" value="1" />Oneway
                </label> 
                
                <label class="btn btn-default active">
                    <input type="radio" id="q157" name="quality[25]" value="2" />  Return   
                </label> 
      
                 <label class="btn btn-default">
                    <input type="radio" id="q158" name="quality[25]" value="3" /> Multi City
                </label> 

               
            </div>

here is javascript:

<script> 
$(document).ready(function(){
 $("#q156").click(function(){
	
   alert('egrgregrg');
   });

});	  
		  		  
</script>

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

Shashika...

0 1

Reply
ANSWER
User: Shashikant
Replied: on Sep 16, 2015 05:29 AM
Modified: on Sep 16, 2015 05:37 AM
Report

Here I have created sample that will help you out.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style type="text/css">
        .inactive
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            ShowActiveTab($('.btn-group .active input[type=radio]')[0].id);
            $('.btn-group input[type=radio]').bind('change', function () {
                $('.forms > div').hide();
                ShowActiveTab($(this)[0].id);
            });
        });
        function ShowActiveTab(id) {
            var btnId = id;
            btnId = btnId.replace(/q/g, '');
            $('#dv' + btnId).show();
        }       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="btn-group col-md-12" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" id="q156" name="quality[25]" value="1" />Oneway
            </label>
            <label class="btn btn-default active">
                <input type="radio" id="q157" name="quality[25]" value="2" />
                Return
            </label>
            <label class="btn btn-default">
                <input type="radio" id="q158" name="quality[25]" value="3" />
                Multi City
            </label>
        </div>
        <div class="col-md-12 forms">
            <div id="dv156" class="form-group inactive">
                Oneway
                <input type="text" name="name" value=" " />
            </div>
            <div id="dv157" class="form-group inactive">
                Return
                <input type="text" name="name" value=" " />
            </div>
            <div id="dv158" class="form-group inactive">
                Multi City
                <input type="text" name="name" value=" " />
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Demo

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

Show Hide DIV based on selected Bootstrap Group Button using jQuery

Company

Explore

Follow us

Contact Us