Need help creating sliders

General
1

Guys…
I’ve been trying to create “sliders” that will drop down columns similar to a slide-out that I have on my webpage. Please visit the development site at: https://www.rjrwebz.com/universe/ and review my attached drawing.

As always, any suggestions, guidance, help, gentle nudges are welcome.

sliders
sliders2148×1650 1.28 MB

2

THere are a multitude of ways that you could attack this. I’m sure some people on this forum could come up with some really elegant CSS only solutions, or use some aspect of Bootstrap, but I tend to think in terms of JavaScript and JQuery, so…

I would create an HTML structure with each of your three dropdowns within a column, containing a div with your content to be revealed inside, and then your tabs.

image
image624×628 41.4 KB

In this case I just used buttons as the tabs to mock it up quickly.
Then, for basic functionality, add a display: none; to each div with a class of ‘content’.
Next, each div should get a unique ID - I’ve used ‘one’, ‘two’, and ‘three’.
Next give each tab (in this case button) an attribute corresponding to the ID of the section of content that you want to open, for example, the first one would be: data-target='#one' and also give each a class of ‘drop-tab’.
Now add a script to your page in whatever way you feel comfortable - either load in a separate file, or include on page between tags. Make sure to add after you load JQuery.

$(document).ready(function(){
  $(".drop-tab").on('click',function(e){
    e.preventDefault();
      let theId = $(this).attr("data-target");
      console.log(theId)
    
    //Check this block is open or not..
    if(!$(this).prev().hasClass("open")) {
      $(theId).slideDown(400);
      $(theId).addClass("open");
    }
    
    else if($(this).prev().hasClass("open")) {
      $(theId).removeClass("open");
      $(theId).slideUp(400)
    }
  });
});

You will have to work out the styling. Good luck!

3

Thanks @RobM for your fast response… I’m not familiar with jQuery but I’ll give what you sent a try and see if I can get it to work.

I was hoping that the slideout I already have could be modified to be a slidedown rather than a slideout but beggars shouldn’t be choosers, I guess.

I’m attaching a screen shot of the CSS I use to run the slideout and hope someone can give me ideas how to modify it to run the desired slidedowns.

CSS for slideout
CSS for slideout482×1554 246 KB

4

you can do that in CSS using display: none; for the hidden content until it’s clicked on and change it to display: block or grid or flex, whichever need.

to detect the mouse click you could use javascript or what’s called the “input checkbox toggle” and use the :checked status to toggle the display change.

here’s a full implementation of a menu using it, with animation included.