custom Switch button in footer

[craigfeldspar]

I've created a switch button on my homepage (which is also the project footer) that lets me switch between the Series view and the Artworks view, thanks to Collapse Row (code below). But I can't manage to improve the code so that when I'm on a project in the ‘Artworks’ category (selector: data-catid=‘[3]’) I can force the active state of the switch to Artworks to get the corresponding footer. And vice versa when you switch back to the Series view (selector: data-catid=‘[1]’). Is it the fact that my homepage is a footer that's causing the problem?

I'd appreciate your help :)
Thanks a lot!
—
https://benoitlefeuvre.com/

<script>
  function toggleButton(clickedButton) {
    var buttons = document.querySelectorAll('.overview-button, .artworks-button');
    buttons.forEach(function(button) {
      button.classList.remove('selected');
    });

    clickedButton.classList.add('selected');
  }
</script>

[arminunruh]

ah im not sure if i understand correctly!

u mean when ure inside this:
https://benoitlefeuvre.com/rooted/

this is a series.
and there the switch doesnt work?

I can force the active state of the switch to Artworks to get the corresponding footer.

this sentence i dont understand.
you mean the active state is not correct when you are

ah you mean when you are here:
https://benoitlefeuvre.com/erosion-3/

the button "artwork" should have the active state. but instead right now "series" has the active state?

window.laytheme.on('newpageshown', function(){
	if(jQuery('body').attr('data-catid') == '[3]'){
		jQuery(".artworks-button").addClass('selected');
		jQuery(".overview-button").removeClass('selected');
	} else if(jQuery('body').attr('data-catid') == '[1]'){
		jQuery(".artworks-button").removeClass('selected');
		jQuery(".overview-button").addClass('selected');
	}
})

do you understand what my code does? maybe try this

[craigfeldspar]

thanks for your quick feedback, yes that's exactly it, you've got it right! activating the switch button works with your code but not changing the expand/collapse rows. Would you know how it could be done?

https://benoitlefeuvre.com/erosion-3/

[arminunruh]

when i click on series and when i click on artworks

both times rows are hidden and shown

[craigfeldspar]

I've added the code you gave me, which selects the artworks tab in the example on this page but doesn't display the content as if you'd clicked on artworks, see?

[arminunruh]

idk, when i click artworks i see things like this:

how am i supposed to know which rows should show and which should hide?
its so many rows

can you create a simpler case for me

look this is the series button.
in there, it has: all row ids:
6,24,30,46,58,63,9,68,49,90,105,109,101,104,136,133,86,91,94,141,143,120,128,497

in the data-expand attribute.
those should get shown when you click on there.

the artworks button has these:
1,65,72,85,56,79,21,40,52,61,38,12,42,99,136,147,138,159,156,153,388,426,124,179,331,329,367,369,307,314,119,455,71

these are like idk. 90 rows, i dont really have the time to go through all of these and check them out

i think using the row expand feature here is not good.
i think you should give your rows a class of either:
series

or

artworks

in right click- > set html class and id

then make your javascript show and hide rows based on their class and what you clicked on

jQuery(".artworks-button").on('click', function(){
jQuery(".row.artworks").show();
jQuery(".row.series").hide();
});

if you dont want to do this, please create a much simpler test case for me on a separate page with like 2 artwork rows and 2 series rows and a clear way for me to see which row is an artwork row and which is a series row

[craigfeldspar]

there's no need to change which rows should be displayed or not, because I manage this myself in the homepage (which is also the footer). when here, for example, you're on an Artwork detail page, you need to be able to display the correct corresponding category in the footer as if you'd clicked on it (as on the homepage).

in your previous code, the category selection worked but not the simulated click to display the correct category (artwork or series). As I said earlier in my messages. Is this more understandable ?

[arminunruh]

as i said i need a simpler test case

:(

[craigfeldspar]

to answer your question from the ‘anchor conflict’ topic, no, unfortunately that didn't solve the problem, which I'm still trying to resolve. I've re-applied the code you gave me here above but same thing, it displays the correct Serie/Artworks switch button corresponding to the page's cat-id, but it doesn't display the content accordingly (as if Artworks had actually been clicked).

[arminunruh]

ok. if you could create a page where you just have like 2 or 3 rows in there. and make the bug happen in this simpler case.
then i can try and fix it. cause this example case is too complex.

[craigfeldspar]

I've made a test page with the same footer operation, let me know if this is better for you: https://benoitlefeuvre.com/test/

thanks!

[craigfeldspar]

hi
up 🧌

[arminunruh]

hey oh yea i need to check this out sry

[craigfeldspar]

in this case, the switch button should be on Artworks, as the page category is data-catid=“[3]” and should display the correct content as if Artworks had been clicked.

[arminunruh]

im checking it out now

[arminunruh]

ok it seems like i had a really hard time to understand what the problem was :O
i misunderstood you

basically you just need to trigger a click on one of the buttons

u got two buttons:

.artworks-button

and

.overview-button

and as far as i understand this would be the way to do it:

when you go to a page where you want overview-button to be auto-activated:

window.laytheme.on('newpageshown', function(){
if(jQuery("body").hasClass("slug-home"){
jQuery(".overview-button").click();
}
})

basically when you visit the homepage, this will click the overview button using javascript:

but maybe u need to remove this custom js u got here:

this could be in conflict with that click js
i think u just add "selected" class

maybe for styling, instead use the class "expand-link-clicked" cause thats the "active" class

so basically with newpageshown and checking the body class you can find out which page u just landed on.
and then either call

jQuery(".overview-button").click();

or

jQuery(".artworks-button").click();

if my previous code was checking the right pages (no idea), it could for example look like

window.laytheme.on('newpageshown', function(){
	if(jQuery('body').attr('data-catid') == '[3]'){
		jQuery(".artworks-button").click();
	} else if(jQuery('body').attr('data-catid') == '[1]'){
		jQuery(".overview-button").click();
	}
})

but basically this was no lay theme bug, you just needed help with your custom code

[craigfeldspar]

Thanks for your reply. You're right, it's probably not a Lay bug but rather that I need help with my code. I tested it, but unfortunately it doesn't work.

[arminunruh]

:/
can you tell me:
which page should have what button activated??

and can u gimme your /wp-admin/ login

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

[arminunruh]

<script>
    window.laytheme.on('newpageshown', function(){
        setTimeout(function(){
        	if(jQuery('body').attr('data-catid') == '[3]'){
        	    if( window.utility.isDesktopOrTabletSize ) {
            		jQuery("#footer .artworks-button").click().addClass("selected");
            		jQuery("#footer .overview-button").removeClass("selected");
        	    } else {
        	        jQuery("#footer-custom-phone-grid .artworks-button").click().addClass("selected");
        	        jQuery("#footer-custom-phone-grid .overview-button").removeClass("selected");
        	    }
        	} else if(jQuery('body').attr('data-catid') == '[1]'){
        	    if( window.utility.isDesktopOrTabletSize ) {
        		    jQuery("#footer .overview-button").click().addClass("selected");
        		    jQuery("#footer .artworks-button").removeClass("selected");
        	    } else {
        	        jQuery("#footer-custom-phone-grid .overview-button").click().addClass("selected");
        	        jQuery("#footer-custom-phone-grid .artworks-button").removeClass("selected");
        	    }
        	}
        }, 1000)
    })
</script>

seems like this code is what was needed

[craigfeldspar]

Thank you very much for your help and your time. That's exactly what I was looking for 🙏