Display content below full row - jQuery toggle

[computerbarry]

This is what I’m trying to achieve - jsfiddle example
I don’t understand the js and not sure how I can implement this into my code.

My code only displays the content div below the clicked container. How can I make it show below the full row that’s in view, taking into account this will be responsive?

Wondering the best approach, maybe a more simplistic way than the example above?

My example - codepen

Code so far:

$(function () {
  $(document).on('click', '.display-info', function(e){
  
   $(this).closest('.column__4').next('div.content').fadeToggle(300);
    e.preventDefault();
  });
});

Reduced for viewing. I have a number of identical columns below:

...
<div class="column__4 col">
    <div class="img">
      <a class="display-info" href="">
        <img src="//via.placeholder.com/250x150" />
      </a>
    </div>
</div>
<div class="content">Some Content</div>
...

Thanks, Barry

[m_hutley]

I -think- what you’re trying to describe is similar to Bootstrap Tabs.

jQuery also implements a Tab setup.

[computerbarry]

Thanks @m_hutley

Not tabs, I’ve used tabs before. In this instance all the containers are showing, the hidden content is related to each column and will be shown when somebody clicks the image.

If you have a quick look at the first fiddle example and click the numbers you’ll see what I mean.
Compared to the codepen example.

Cheers, Barry

[m_hutley]

Ah, I see.

I don’t know there’s going to be a more simplistic way that is still responsive/flexible to a variable number of items in a column… the Fiddle’s code is designed so that it can respond without preordaining the number of elements in a row.

[computerbarry]

Yes, a tricky one

In their example (jsfiddle) they only have one container which is used for every block. In my example, I have a container for every block.

I did try changing their code though couldn’t get anything to work.

They have 3 functions in total:

function placeAfter($block) {}
$(window).on('resize', function() {}

The only function I have:

$('.wrapblock').on('click', function() {}

Maybe I just need to build the placeAfter and resize function.

Any ideas how I can implement their approach into what I have shown in the codepen, or code above somehow?

Thanks,
Barry

[m_hutley]

The ‘heavy lifter’ of their code is this block.

$blocks.each(function(i, j) {
    if($(this).offset().top != top) {
        placeAfter($(this).prev('.wrapblock'));
        return false;
    } else if ((i + 1) == $blocks.length) {
        placeAfter($(this));
        return false;
    }

It’s the code that determines where to put the display.

[computerbarry]

So we need a way of cloning or using something similar so we can use this approach with my codepen example.

Slightly out of my jquery coding skills, any idea how we can do this?

And remember, we have multiple containers that could possible show, not just one, as they do.

We know my click function works, we just need a way of showing it full width after the last block within that row.

Barry

[PaulOB]

At the risk of butting in where I’m not wanted I did have a similar old demo that displayed full width content in rows under the tabs.

I’ve just updated it to use flex (as it previously used floats) and is shown below.

This is only proof of concept and untested but may help with your quest.(Also the tabs should probably be anchors rather than divs so that you can tab through with the keyboard like my old float example.)

The demo is a little rigid because I change the order (using the property ‘order’) of the tabs in the media queries using the order property to align them all properly. That means the css references each item so if this is a dynamic number of elements that part would need to be scripted instead to make it automatic.

Hope it helps or gives ideas anyway

[computerbarry]

On the contrary Paul
This is a great example and exactly the sort of thing I’m looking for.

I will run some tests and see if I can get a functioning example with my setup.

Thanks, and will report back on the findings.

Barry