How to call and hide lists using two buttons - using Javascript HTML CSS?

Question

I'm really struggling to get to grips with using JS. Once I have one working function i'll be winning - but getting one to work is killing me. I'm trying to use two buttons, each one calls a separate list of names. When I open the page I want one list to already show (The Sport list) and one button (Sport button) to already appear clicked, when I click the 2nd button (Item) I want the sport list to disappear and the Item list to appear. These lists have all their styling done in CSS.

Do I store the lists in my HTML? Do I store them in the JS? I'm sure this is rather basic but I just cannot get this to work and it's driving me nuts.

Currently my code looks like this:

JS - just for one button. How would I add the 2nd button?

var main = function () {
    $('.Btn').click(function () {
        $('itemList').hide(200);
        $(this).children('sportList').show(200);
    })
}

$(document).ready(main);

HTML:



    
        
            Choose By Sport
            Choose by Item
        
    




    
    
        
            
                American Football
                Basketball
                Cricket
                Cycling
            
        
    
    




    
        
            
                
                    Headwear
                    T-shirts
                    Gloves
                    Tracksuit Bottoms

CSS:

/*Buttons*/
.btn {
  text-align:center;
  background: #551A8B;
  background-image: -webkit-linear-gradient(top, #551A8B, #551A8B);
  background-image: -moz-linear-gradient(top, #551A8B, #551A8B);
  background-image: -ms-linear-gradient(top, #551A8B, #551A8B);
  background-image: -o-linear-gradient(top, #551A8B, #551A8B);
  background-image: linear-gradient(to bottom, #551A8B, #551A8B);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Verdana, sans-serif;
  color: #fff;
  font-size: 18px;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
  margin-left:50px;
  margin-right:50px;
}
.btn:hover {
  background: #808080;
  background-image: -webkit-linear-gradient(top, #808080, #808080);
  background-image: -moz-linear-gradient(top, #808080, #808080);
  background-image: -ms-linear-gradient(top, #808080, #808080);
  background-image: -o-linear-gradient(top, #808080, #808080);
  background-image: linear-gradient(to bottom, #808080, #808080);
  text-decoration: none;
  color:#551A8B;
}
.buttonArea{
    background-color: #fff;
    padding-top:10px;
    padding-bottom: 10px;
    text-align:center;
}
.buttonArea .container {
  position:relative;
  top:20px;
}

Lots of CSS there, probably no use to you but you never know. I've cut down the HTML lists to save some space!

I've done the Codecademy courses on this but cannot seem to translate this into something that actually works.

This:

also exists in my Body area.

Thanks!

Jake

Medet Tleukabiluly · Accepted Answer

More elegant way would be like this

var main = function() {
  var hide_classes = ['sportList', 'itemList']; //list of classes, used by data-hideclass attribute, can be extended
  $('.' + hide_classes[0]).show(); //show only first list
  for (var k = 1; k < hide_classes.length; k++) { //hide others
    var hide_class = hide_classes[k];
    $('.' + hide_class).hide();
  }

  $('.btn').click(function(e) {
    for (var i = 0; i < hide_classes.length; i++) { //loop over list of classes
      var hide_class = hide_classes[i];
      if ($(this).attr('data-hideclass') === hide_class) { //if button data-hideclass is equal
        $('.' + hide_class).show(); //show list
      } else {
        $('.' + hide_class).hide(); //otherwise hide
      }
    }
  })
}

$(document).ready(main);

/*Buttons*/

.btn {
  text-align: center;
  background: #551A8B;
  background-image: -webkit-linear-gradient(top, #551A8B, #551A8B);
  background-image: -moz-linear-gradient(top, #551A8B, #551A8B);
  background-image: -ms-linear-gradient(top, #551A8B, #551A8B);
  background-image: -o-linear-gradient(top, #551A8B, #551A8B);
  background-image: linear-gradient(to bottom, #551A8B, #551A8B);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Verdana, sans-serif;
  color: #fff;
  font-size: 18px;
  padding: 5px 20px 5px 20px;
  text-decoration: none;
  margin-left: 50px;
  margin-right: 50px;
}
.btn.active {
  background: #808333;
  background-image: -webkit-linear-gradient(top, #808080, #808080);
  background-image: -moz-linear-gradient(top, #808080, #808080);
  background-image: -ms-linear-gradient(top, #808080, #808080);
  background-image: -o-linear-gradient(top, #808080, #808080);
  background-image: linear-gradient(to bottom, #808080, #808080);
  text-decoration: none;
  color: #551A8B;
}
.btn:hover {
  background: #808080;
  background-image: -webkit-linear-gradient(top, #808080, #808080);
  background-image: -moz-linear-gradient(top, #808080, #808080);
  background-image: -ms-linear-gradient(top, #808080, #808080);
  background-image: -o-linear-gradient(top, #808080, #808080);
  background-image: linear-gradient(to bottom, #808080, #808080);
  text-decoration: none;
  color: #551A8B;
}
.buttonArea {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.buttonArea .container {
  position: relative;
  top: 20px;
}




  
    
      Choose By Sport
      Choose by Item
      
    
  




  
    
      
        
          American Football
          Basketball
          Cricket
          Cycling
        
      
    
  




  
  
    
      
        
          Headwear
          T-shirts
          Gloves
          Tracksuit Bottoms

Note that this way you can extend it, and add more lists, if you desire. Just carefully read comments in js code

How to call and hide lists using two buttons - using Javascript HTML CSS?

Answers (1)

Related Questions