0

I'm working on a custom archive page on WordPress that has two article styles. One shows up as an article list, another as a grid. The user is supposed to toggle between them via two buttons. As in, button 1 shows list view while hiding the grid view, and button 2 does the opposite.

And I used a pretty basic jQuery for this, but the thing is, it only hides the first article in the list/grid, not all and I can't figure out why. Has anyone here run into a similar issue?

This is my jQuery: 

$('#list_show').click(function(){
        $('#custom-archives_list .archive-article').toggle();
        $('#custom-archives_grid').toggle();
    });
    $('#grid_show').click(function(){
        $('#custom-archives_grid').toggle();
        $('#custom-archives_list .archive-article').toggle();
    });

Could this be related to something I wrote in archive.php? I know almost nothing about php, so I just inserted a few lines of it inside the html structure, enough so that the articles would be populated with the client's content, nothing more. Or is this something WordPress related in general that I'm missing?

Thanks!

hemoglobin
  • 761
  • 4
  • 12
  • 33
  • 6
    This behaviour sounds like you're repeating the same `id` in the DOM when they have to be unique. Could you please edit your HTML in to the question so we can confirm this. Please note, we'd need to see the actual HTML output, not the PHP which creates it – Rory McCrossan Mar 12 '19 at 13:40
  • That was my problem, yup! I was relying on the ID instead of the class. Thank you both! – hemoglobin Mar 12 '19 at 13:52
  • 1
    Glad you got it working – Rory McCrossan Mar 12 '19 at 13:54

0 Answers0