hide elements in table with javascript

Question

I have worked to make a table have a behaviour like the following:

As you can see, when you click in the arrow, the content hidden is displayed, and the other web elements are not displaced up neither down.You can see how it actually behaves in this page.

I tried to replicate the functionallity but I did not get it. When I click in an item that is supossed to hide from view, it is not a smooth transition, what is more , all the page is displaced up or down(not only the item I want to hide).

I created my own table, similar to the above shown.

What I want to do is:

1.Make the transition (hide or show) smoother.

2.Avoid moving up or down ALL the elements of the page (refer please to the hyper link I provided before to see what I need).

Hide two or more elements, for instance, in the above image I marked with blue what I want to hide/show.

This is my table code:


 //I added the style here because I am still testing the table

    
        Modulo 1: Introduction
    
    
        
        Introduction to Software Trainingx
        FREE 
         00:40:00
    
    
        
            Praesent sit amet lacus imperdiet, semper libero non, convallis lectus. Nunc nisi quam, dignissim ut luctus non, dignissim pellentesque massa. Etiam ac fermentum risus, vitae dictum quam.
        
    
    
        Modulo 2: Introduction
    
    
        
        Introduction asgx
        FREE 
         00:40:00
    
    
        
            Praesent sit amet lacus imperdiet, semper libero non, convallis lectus. Nunc nisi quam, dignissim ut luctus non, dignissim pellentesque massa. Etiam ac fermentum risus, vitae dictum quam.

My Javascript:

    $(".header").click(function () {

        $header = $(this);
        //getting the next element
        $content = $header.next();
        //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
        $content.slideToggle(500, function () {
            //execute this after slideToggle is done
            //change text of header based on visibility of content div
            $header.text(function () {
                //change text based on condition
                //do something 
            });
        });

    });

Thanks!

Marylyn Lajato · Accepted Answer

As given in the boostrap's documentation, There 's a [collapse layout] that you can use for this case.

Bootstrap Reference : https://getbootstrap.com/docs/4.0/components/collapse/

Sample Code Reference:







  
    
      
        
         Modulo 1: Introduction
        
      
    

    
      
        Sample A
      
    
  
  
    
      
        
          Modulo 2: Introduction
        
      
    
    
      
        Sample 2.

hide elements in table with javascript

Answers (1)

Related Questions