Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

display data accordingly when a particular button is clicked

I am working on the twitch api, my question has nothing to do with the api.

http://codepen.io/tushar_13/full/ZWvOwg/

When I click the online button I want to see channels those who are currently streaming and same thing goes for the offline button.

I have appended this data to my page, notice the div with class sub-section.

var html = '<div class="sub-section">';
html+= '<ul><li>';
html += '<img src="'+channel.logo+'">';
html+= '<span class="title">Title: ';
html+= '<a href="https://www.twitch.tv/'+user+'">'+name+'</a></span><br>';
html+= statusSign;  // here statusSign
html+= '<span class="statusOF">'+statusOF+'</span><br>';
html+= '<span class="status">'+status+'</span></li></ul></div>'        

// append it to the document
 $(html).appendTo("#main-section");

variable statusSign look like this, basically if the channel is not streaming, I added the class offline, and if the channel is currently streaming added the class online

if(stream.stream == null) {
          // add particular img
          statusSign = '<i class="fa fa-times fa-2x offline"></i>';
          // not streaming -just displaying it
          status = "Currently Not Streaming";
          // simply means twitcher is offline
          statusOF ="Offline";
 // if twitcher is streaming same steps with a different icon
        } else {
          statusSign = '<i class="fa fa-check fa-2x online"></i>';
          status=channel.status;
          statusOF ="Online";
        }

Now here comes my button section, html id="online"

$('#online').click(function(){
      $(".sub-section").each(function() {
    if ($(this).hasClass('offline')) {
        $(this).hide();
      } else {
        $(this).show();
      }
      });
   });

here is the link

http://codepen.io/tushar_13/full/ZWvOwg/