CODEWITHSUNDEEP
javascriptjquerycsshideshow
Namrad
Namrad

Reputation: 15

Multiple show/hide scrollable containers

In my example here:

Example

JS

$('button').on('click', showHide);
$('.overlay').on('click', showHide);

function showHide(){
  $('.scroll-container').toggleClass('show');
  $('.content-container').toggleClass('no-scroll');
  $('.overlay').toggleClass('opacity');
  }

you have a basic body with text. A clickable element (in this case a 'button') causes a scrollable container to appear and 'hover' over the original body, which can be hidden again by clicking outside of this container.

I'm not very good at JavaScript and with this example I was helped by a friend. The thing I'm struggling with now is that I need multiple different clickable elements, displaying a similar scrolling container, but with different content.

I'm doing this for a portfolio website, so imagine a bunch of photos on a page, which when clicked result in a body hovering over the original content, further elaborating the clicked project. Do I create multiple id's for each project, together with multiple scrolling container id's, and just copy the JavaScript a couple of times?

I hope this makes sense and I hope someone is capable of explaining to me how I'm able to create the proposed effect.

Upvotes: 1

Views: 295

Answers (2)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12882

First of all, you have to make a connection between buttons and containers that should be opened. One way is to use their indexes, so that when first button is clicked, first container would open. You can use this reference of the clicked object inside your function, in order to get its index. Like this:

$(this).index()

Then, you have to select all the elements with scroll_container class $('.scroll-container') and reduce the set of matched elements to the one by passing index of the clicked element to .eq() method .eq($(this).index()). Finally, you have to add show class to it addClass('show').

And because the logic is changed, you have to separate actions done on button and .overlay click events. They do not make a reverse action now, so they are not "togglers" anymore.

http://codepen.io/anon/pen/LpWwJL

$('button').on('click', show);
$('.overlay').on('click', hide);

function show(){   
   $('.scroll-container').eq($(this).index()).addClass('show');
   $('.content-container').addClass('no-scroll');
   $('.overlay').addClass('opacity');
}

function hide() {
   $('.scroll-container').removeClass('show');
   $('.content-container').removeClass('no-scroll');
   $('.overlay').removeClass('opacity');
}

UPDATE

One thing you should keep in mind regarding $(this).index() method. As it is written here:

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

That means that trigger elements should have common parent in order to maintain our logic.

In cases like this: https://stackoverflow.com/posts/32946956/edit, elements that are triggering scroll_container appearance, have different parent nodes (they are placed in 3 different divs). So, if we will call index() method for each of them, it will return '0' because they are the first and the only elements in their parent nodes.

Actually it means that you have to get the order of their parent elements, not theirs own. This can be achieved by using parent() method before index():

$(this).parent().index()

Here is updated codepen.

Upvotes: 1

gon250
gon250

Reputation: 3545

If I were you, I would implement a generic function to display a different content using the same function based in the button. So for that we will need something to relational the click with the content for that we can set a value in out button: 

<button data-id="1">Click me 1!</button>
<button data-id="2">Click me 2!</button>

so out when we click the button we should get the value to send it to our function: 

    $('button').on('click', function(){
        var dataButtonValue = $(this).data('id');
    });

Then we can match it with the content using for example data-content-id

<div class="content" data-content-id="1">your wording</div>
<div class="content" data-content-id="2">your wording</div>

With all that we can manage what content we want to show depends on the click.

function showHide(id){
    $('.content[data-content-id="' + id + '"]').toggleClass('show'); 
}

DEMO

I hope it's helps.

Upvotes: 0

Related Questions