hide and show

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
      <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Tablet</a></li>
        <li><a href="#">Smartphone</a></li>
      </ul>
    </div> 
</div>
<div class="hidden">
<p>This is description about tablet</p>
</div>
<div class="hidden">
<p>This is description about smartphone</p>
</div>
</body>
</html>

Open in new window


i have a dropdown, based on the values i want to show the respective content and also retain the selected value replacing the default value. for ex if i select tablet, sony text should be replaced with tablet in the dropdown and show the content below.
pl help.
codelevelAsked:
Who is Participating?
 
Ioannis ParaskevopoulosCommented:
Hi,

My example is very simplistic but lets see if it suits you:

<div class="container">
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Sony <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu" id="deviceselection">
            <li><a href="#">Tablet</a>

            </li>
            <li><a href="#">Smartphone</a>

            </li>
        </ul>
    </div>
</div>
<div id="results">
    <div class="hidden" id="Tablet">
        <p>This is description about tablet</p>
    </div>
    <div class="hidden" id="Smartphone">
        <p>This is description about smartphone</p>
    </div>
</div>

Open in new window


$('li','#deviceselection').click(function(){
    //hide all
    $.each($('div','#results'),function(i,el){
        $(el).addClass('hidden');
        //console.log(el);
    })
    
    //show only the one you selected
    var id = $('a',this).text();
    $('#'+id).removeClass('hidden');
    //console.log($('a',this).text());
})

Open in new window


JSFiddle sample

Giannis
0
 
Imran Javed ZiaConsultant Software Engineer - .NET ArchitectCommented:
Hi,

There are number of ways to do this, e.g. You can apply JQuery Click method and change class with selector
like following:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="btn-group">
            <button id="btnDropDown" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Tablet</a></li>
                <li><a href="#">Smartphone</a></li>
            </ul>
        </div>
    </div>
    <div id="dvTablet" class="hidden">
        <p>This is description about tablet</p>
    </div>
    <div id="dvSmartphone" class="hidden">
        <p>This is description about smartphone</p>
    </div>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('li').click(function () {
                var item = this.children(0).innerHTML;

                $('#btnDropDown')[0].innerHTML = ' ' + item + ' <span class="caret">'

                if (item === 'Tablet') {
                    $('#dvTablet').attr('class', '');
                    $('#dvSmartphone').attr('class', 'hidden');
                }
                else if (item === 'Smartphone'){
                    $('#dvTablet').attr('class', 'hidden');
                    $('#dvSmartphone').attr('class', '');

                }
            });
            

        });
    </script>
</body>
</html> 

Open in new window

0
 
codelevelAuthor Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.