• nlowefbir16

    (@nlowefbir16)


    Afternoon,

    I was wondering if someone could please help.

    I’ve manage to create a few collapsible sections for a webpage, using JavaScript, but I was wondering if it would be possible to create hyperlink to a different page, which would take you to the page, then it would also expand the relevant section when it loads?

    Kind regards.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes, as long as you pass the data from one page to another using the URI. You can do this by linking to a section in the page with the hash (pointing to the element ID) or using a parameter on the end of the URL.

    Thread Starter nlowefbir16

    (@nlowefbir16)

    Hi Andrew,

    Many thanks for getting back to me so quickly.

    Sure, I can give that a try. Do you know of where I can look at some examples of this?

    Kind regards.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Not really as the answer will be specific to the JS you’ve used for the collapsible component.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What JS have you used?

    Thread Starter nlowefbir16

    (@nlowefbir16)

    Hi Andrew,

    I have used a ‘slide toggle’, where a user clicks on a button (named as ‘[number]-trigger-button’) and the section is toggled either revealed or hidden.

    Kind regards.

    Thread Starter nlowefbir16

    (@nlowefbir16)

    Hi Andrew,

    Apologies, I forgot to include the below.

    The buttons, which act as the ‘trigger buttons’, are on the same page as the collapsible sections. When a user click on the button, the relevant section it is linked to will expand. When the same button, or another button is clicked, any section which is currently open will hide and the new one will expand.

    I was hoping to have a series of hyperlinks on the homepage of this website, where a user will click on one, then they will be taken to the page where these sections are, but the relevant one will open when the page loads.

    Kind regards.

    staartmees

    (@staartmees)

    Try Shortcodes Ultimate, it does want you want and more.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I’m not sure on the JS you’ve used for that still. Here is some pseudo code that you may be able to use:

    Page 1

    
    <a href="other-page#firstPanel"> A link to Page 2</a>
    

    Page 2

    
    <script>
    var uri = get the hash key from the URI,
        openPanel;
    
    if (the hash exists) {
        var elementFromHash = $(uri);
    
        openPanel = elementFromHash;
    }
    
    if (collapsible functionality not initialised yet) {
        
        initialiseCollapsiblePanel(openPanel);
    }
    
    function initialiseCollapsiblePanel(openPanel) {
    
        if (openPanel) {
            options = {
                openPanel: openPanel;
            };
            
            runCollapsiblePanel(options);
        }
    
    }     
    
    </script>
    
    Thread Starter nlowefbir16

    (@nlowefbir16)

    Hi Andrew,

    Many thanks, I’ll give that a try.

    Also, thanks for your reply, staartmees – I’ll have a look at your link as well.

    Kind regards.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Question RE: JavaScript’ is closed to new replies.