CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3
Ahmed Morgan
Ahmed Morgan

Reputation: 69

How to show and hide div elements based on the selection of bootstrap dropdown in jQuery

I have the following example http://jsfiddle.net/ahmedcom/5qu20yu6/

and it is working fine , now how can change 

<select>
    <option>orderby</option>
    <option id="select1">__1</option>
    <option id="select2">__2</option>
    <option id="select3">__3</option>
</select>

to 

<div class="dropdown">
    <button type="button" class="catby btn btn-sm dropdown-toggle" data-toggle="dropdown">
        <i class="ion-android-apps"></i>order by<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" data-value="action" id="select1">__1</a></li>
        <li><a href="#" data-value="another action" id="select2">__2</a></li>
        <li><a href="#" data-value="something else here" id="select3">__3</a></li>
    </ul>
</div>

What are the modifications that will be in JavaScript ?

Upvotes: 1

Views: 8572

Answers (5)

Muhammad Ashikuzzaman
Muhammad Ashikuzzaman

Reputation: 3143

Here is the JsFiddle Demo:

Description: At the of the code add this source file:

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>

And use this jQuery function, which will select the clicked anchor tag and then find the box div by equating the class name. And then show it.

$(document).ready(function(){
  $(".dropdown-menu li a").on("click",function(){
    var iddiv =  $(this).attr("id") ;
    $(".box").hide();
    $("."+iddiv).show();
  });
});

Upvotes: 0

Anh Pham
Anh Pham

Reputation: 54

The main modification here is we need to bind click event on '.dropdown-menu li'. Please check my link: 

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
   var $target = $( event.currentTarget );             

   if($target.attr("id")=="select1"){
            $(".box").not(".select1").hide();
            $(".select1").show();
        }
        else if($target.attr("id")=="select2"){
            $(".box").not(".select2").hide();
            $(".select2").show();
        }
        else if($target.attr("id")=="select3"){
            $(".box").not(".select3").hide();
            $(".select3").show();
        }

        else{
            $(".box").hide();
        }
    return true;

});

http://jsfiddle.net/3m6fbgbq/

Upvotes: 0

Tremmillicious
Tremmillicious

Reputation: 506

This can get you started. 

$(document).ready(function(){
    $('.dropdown-menu li a').click(function() {
        var boxClass = '.'+$(this).attr("id");
        $(".box").not(boxClass).hide();
        $(boxClass).show();
    })
});

Upvotes: 0

Dhwani sanghvi
Dhwani sanghvi

Reputation: 475

This is Actually What you want.I made slight modification in javascript.

DEMO: http://jsfiddle.net/5qu20yu6/8/

<div class="btn-group">
  <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Items <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"data-value="action -1">Item- I</a></li>
    <li><a href="#" data-value="action -2">Item II</a></li>
    <li><a href="#" data-value="action-3">Item III</a></li>
  </ul>
  </div>
<p class="menu">Options:</p>

$(".dropdown-menu li a").click(function(){
  var selText = $(this).attr('data-value');
    $(this).parents('.btn-group').siblings('.menu').html(selText)
});

Upvotes: 1

Henry Tran
Henry Tran

Reputation: 526

$('.dropdown-menu a').on('click', function(e){
        e.preventDefault();
        $('button.dropdown-toggle').html($(this).text() + ' <span class="caret"></span>');
        $(".box").hide();
        $('.'+$(this).attr('id')).show();
    });

Upvotes: 0

Related Questions