Twitter Bootstrap Question posted in

Twitter bootstrap – How to create a drop down list with "See more" button

I want a drop down list that will display, say first 3 items, then “See more” link, and when I click more items appended. I did searching around with Twitter Bootstrap and jquery but can’t find any examples. Please help if any links of example or existing posts.

Tags:

2

Answers


  1. 0

    Follow this link, you’ll find answer.
    In see more section, use 

    $(selector).collapse('hide'/'show');

    Hope this help

    Thuc Tran

    Login or Signup to reply.
  2. 0

    LATEST UPDATE – USING SELECT TAG :

    This one is completely different from the first one. But it is easier I guess. I hope this will help you. 

    <select class="form-control" id="itemList" onchange="addItems()">
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
    <option value="SeeMore" id="seeMore">See More</option>
</select>

    JS 

    // Add more items here.
var addedItems = ["Billie Joe", "Mike Dirnt", "Tre Cool"];

function addItems(){

    if ($("#itemList option[value='SeeMore']").val() == "SeeMore") {

        // Removes the See more item.
        $("#itemList option[value='SeeMore']").remove();

        for (var i = addedItems.length - 1; i >= 0; i--) {
            var theSelect = document.getElementById("itemList");
            var option = document.createElement("option");
            option.text = addedItems[i];
            option.attr = addedItems[i];
            theSelect.add(option);
        };
    };

}

    THIS ONE (BELOW) IS USING BOOTSTRAP DROPDOWN

    OLDER UPDATE here is a live sample jsFiddle

    Here you can use a simple dropdown from bootstrap : 

    <div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Awesome!
    <span class="caret"></span>
</button>
<ul id="yourList" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
    <li role="presentation"><a id="seeMore" role="menuitem" tabindex="-1" href="#">See more...</a></li>
</ul>
</div>

    Then add this jquery, it’s self explanatory you can understand it very quick.

    <script type="text/javascript">

// Add more items here.
var addedItems = ["Billie Joe", "Mike Dirnt", "Tre Cool"];

// When see more is clicked this methos was called.
$('#seeMore').click(function() {

    for (var i = addedItems.length - 1; i >= 0; i--) {
        // This removes the "See more" item on the list
        $('li').find('#seeMore').remove();
        // Appending the new items on the list
        $('#yourList').append(
            $('<li>').append(
                $('<a>').attr('href','#').append(
                    $('<span>').attr('class', 'items').append(addedItems[i])
        ))); 
    };

    // Re-open th dropdown after 5th of a second.
    setTimeout(function() { 
        $('#dropdownMenu1').trigger('click.bs.dropdown'); 
    }, 200);
});

    By the way here’s the full code. 

    <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">

  <style type="text/css">

  </style>
</head>

<body>
  <br><br><br>
  <section>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                        Awesome!
                        <span class="caret"></span>
                    </button>
                    <ul id="yourList" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a id="seeMore" role="menuitem" tabindex="-1" href="#">See more...</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </section>


</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script type="text/javascript">

    // Add more items here.
    var addedItems = ["Billie Joe", "Mike Dirnt", "Tre Cool"];

    // When see more is clicked this methos was called.
    $('#seeMore').click(function() {

        for (var i = addedItems.length - 1; i >= 0; i--) {
            // This removes the "See more" item on the list
            $('li').find('#seeMore').remove();
            // Appending the new items on the list
            $('#yourList').append(
                $('<li>').append(
                    $('<a>').attr('href','#').append(
                        $('<span>').attr('class', 'items').append(addedItems[i])
            ))); 
        };

        // Re-open th dropdown after 5th of a second.
        setTimeout(function() { 
            $('#dropdownMenu1').trigger('click.bs.dropdown'); 
        }, 200);
    });
</script>

</html>

    // Add more items here.
var addedItems = ["Billie Joe", "Mike Dirnt", "Tre Cool"];

// When see more is clicked this method was called.
$('#seeMore').click(function() {

  for (var i = addedItems.length - 1; i >= 0; i--) {
    // This removes the "See more" item on the list
    $('li').find('#seeMore').remove();
    // Appending the new items on the list
    $('#yourList').append(
      $('<li>').append(
        $('<a>').attr('href', '#').append(
          $('<span>').attr('class', 'items').append(addedItems[i])
        )));
  };

  // Re-open th dropdown after 5th of a second.
  setTimeout(function() {
    $('#dropdownMenu1').trigger('click.bs.dropdown');
  }, 200);
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                        Awesome!
                        <span class="caret"></span>
                    </button>
          <ul id="yourList" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 2</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 3</a></li>
            <li role="presentation"><a id="seeMore" role="menuitem" tabindex="-1" href="#">See more...</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>


</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search