CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user123
user123

Reputation: 43

How to show/hide table onclick

I'm trying to show/hide table #block-views-apk_user_tracker_page-block_1 .views-table onclick link "NOTIFICATIONS" that's within div #block-views-apk_user_tracker_page-block_1 .views-header. I've tried different scripts but none of them worked, they all seem to be for id's or list, not classes and tables.

Here's the code, it's for site notifications, facebook style. 

<div class="view-header">
      <img src="/photos/led_red.gif"> <a href="/user/3/newforumposts">NOTIFICATIONS (6)</a>    </div>
  
  
  
      <div class="view-content">
      <table class="views-table cols-6">
    <thead>
    <tr>
              <th class="views-field views-field-title">
                  </th>
              <th class="views-field views-field-last-comment-timestamp">
                  </th>
              <th class="views-field views-field-new-comments">
                  </th>
          </tr>
  </thead>
  <tbody>
          <tr class="odd views-row-first">
                  <td class="views-field views-field-title">
            <a href="/node/3955">TITLE 1</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:56          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/3955?page=14#new">1 new</a>          </td>
              </tr>
          <tr class="even">
                  <td class="views-field views-field-title">
            <a href="/node/10452">TITLE 2</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:24          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/10452#new">2 new</a>          </td>
              </tr>
          <tr class="odd">
                  <td class="views-field views-field-title">
            <a href="/node/10445">TITLE 3</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:21          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/10445?page=2#new">1 new</a>          </td>
              </tr>
          <tr class="even">
                  <td class="views-field views-field-title">
            <a href="/node/3871">ANOTHER TITLE</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:17          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/3871?page=8#new">1 new</a>          </td>
              </tr>
          <tr class="odd">
                  <td class="views-field views-field-title">
            <a href="/node/10470">Yet another title</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:14          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/10470#new">1 new</a>          </td>
              </tr>
          <tr class="even views-row-last">
                  <td class="views-field views-field-title">
            <a href="/node/10469">and another</a>          </td>
                  <td class="views-field views-field-last-comment-timestamp">
            24/05/2015 - 03:13          </td>
                  <td class="views-field views-field-new-comments">
            <a href="/node/10469?page=1#new">1 new</a>          </td>
              </tr>
      </tbody>
</table>
    </div>

Upvotes: 0

Views: 1493

Answers (2)

Ɛɔıs3
Ɛɔıs3

Reputation: 7871

If I understand, you want to hide / show the div with class view-table when user cliks on

You have to add a class or id to you <a href="/user/3/newforumposts">, like this :

<div class="view view-apk-user-tracker-page view-id-apk_user_tracker_page view-display-id-block_1 view-dom-id-6">
  <div class="view-header">
    <img src="/photos/led_red.gif">
    <a href="/user/3/newforumposts" class="notif isShown">NOTIFICATIONS (6)</a>
  </div>

    <!-- Following the code -->

And you will be able to achieve your aim with this js code :

$(document).ready(function() {
  $('#block-views-apk_user_tracker_page-block_1 .views-header .notif').click(function () {
    if($(this).hasClass('isShown')) {
      $(this).removeClass('isShown');
      $('#block-views-apk_user_tracker_page-block_1 .views-table').fadeOut(250);
    } else {
      $(this).addClass('isShown');
      $('#block-views-apk_user_tracker_page-block_1 .views-table').fadeIn(250);
    }
  });
});

Upvotes: 0

Gabriel Negut
Gabriel Negut

Reputation: 13960

There is no need to add an extra id or class.

$(function() {
     $(".view-header").click("a", function(e) {
         e.preventDefault();
         $(".view-header").siblings(".view-content").toggle();
    });
});

Upvotes: 2

Related Questions