CODEWITHSUNDEEP
javascriptjqueryasp.nettwitter-bootstrap-3
Lutfor Rahman
Lutfor Rahman

Reputation: 33

Showing a hide mobile-responsive div

I have a row with 3 columns.

|   1   |   2   |    3    |

I want to show all columns in Large and Medium screen. But in Mobile screen I want to show just first column. This work I have done by this code.

<div class="row">
        <div class="col-md-4 col-lg-4">
                <asp:Label ID="lblCatagory1" runat="server" Text=""></asp:Label>
        </div>

        <div class="col-md-4 col-lg-4 hidden-sm hidden-xs" id="cat2">
                <asp:Label ID="lblCatagory2" runat="server" Text=""></asp:Label>
        </div>

        <div class="col-md-4 col-lg-4 hidden-sm hidden-xs" id="cat3">
                <asp:Label ID="lblCatagory3" runat="server" Text=""></asp:Label>
        </div>
</div>

Now I want to create a button in mobile version below this code. By clicking this button others two column will show. How is this possible in Bootstrap/JavaScript **Creating button is not my problem.

Upvotes: 2

Views: 47

Answers (2)

Hussain Patel
Hussain Patel

Reputation: 470

You can do this.. add an id to column 1 and then using jquery() you can add class to col 2 and col3 and display them in same row..

<script type="text/javascript">
    $('#button1').click(function () {
        $('#cat2, #cat3').toggleClass('hidden-sm').toggleClass('hidden-xs');
        $('#cat1, #cat2, #cat3').addClass('col-sm-4 col-xs-4').addClass('col-sm-4 col-xs-4').addClass('col-sm-4 col-xs-4');
    });

Hope this helps

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19123

You can do this.

$('button').on('click', function(){
  $('#cat2, #cat#3').toggleClass('hidden-sm').toggleClass('hidden-xs')
})

Upvotes: 1

Related Questions