Show/Hide Multiple Items & Anchor/Return to Top

  • alphacopies

    (@alphacopies)


    9 years, 6 months ago

    Hello,
    I think this belongs more in the WP-Advanced section, but I can’t post in there?

    Anyway, I am looking to set up a page that lists our business’ services. This is the live page that I have so far: http://alphacopies.com/services

    However, I’ve been working on this test page: http://alphacopies.com/services-test-showhide/

    I would like it to not display any of those text sections listed below the picture gallery until the respective picture is clicked. So let’s say the Printing/Copying picture is clicked. I want it to display that text section (and only that section) and also jump down to the top of that section. Then I’ll include a “go to top” button and they can choose a different option. So let’s say they then select Commercial Printing: at that point, I’d like the Printing/Copying section to disappear, the Commercial Printing section to appear and for the website to jump down to the top of that section.
    Is there any way to make a single click do multiple things (show one section, hide all others, jump to the top of the visible section)?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Pioneer Web Design

    (@swansonphotos)

    9 years, 6 months ago

    A most common approach is to apply the ‘onclick event’ to the HTML element (the img in this case). You can target HTML elements or the unique ID of an element also with onclick events.

    See:

    http://www.w3schools.com/jsref/event_onclick.asp

    Googling “toggle div from image onlick event” will give you plenty of examples of working code.

    Thread Starter alphacopies

    (@alphacopies)

    9 years, 6 months ago

    Sounds good, I’ll look into that. Thanks!

    Thread Starter alphacopies

    (@alphacopies)

    9 years, 6 months ago

    If I’m understanding the onclick element correctly, it is a one-to-one relationship between button and item whose visibility is being toggled; is that correct?
    I’m looking for something that controls multiple items on a single click, i.e. if they click one of the buttons, some items hide and a different item appears, and if they click a different button, that item hides and yet another item appears.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Show/Hide Multiple Items & Anchor/Return to Top’ is closed to new replies.