Show region on click

Looking for a way to hide a whole region on the page. After clicking on an Anchor or a link it should be revealed/scrolled to a region above.

  • James Morris

    Hello Frenk,

    I hope you are well today.

    This can be accomplished fairly easily with a little combination of CSS and jQuery.

    First, you will need to determine what element you want to toggle. Then you will want to use a plugin like Simple Custom CSS & JS to add a little CSS and jQuery to your site.

    For example, say you want to toggle a product description:

    You could use this for your initial CSS:

    a#p1-desc-toggle{
    margin:1em 0;
    padding:.25em;
    background-color:#efefef;
    border:1px solid silver;
    border-radius:5px;
    }
    a#p1-desc-toggle:hover{
    background-color:#777;
    color:white;
    }
    p#p1-desc {
    display:none;
    }

    This would be your HTML:

    <a id="p1-desc-toggle">Show/Hide Description</a>
    
    <p id="p1-desc">This is a paragraph with little content about your amazing product.</p>

    And this would be your jQuery:

    jQuery(document).ready(function($){
        $("a#p1-desc-toggle").click(function(){
            $("p#p1-desc").toggle(1000);
        });
    });

    With a little fine-tuning, you can apply this to just about any element on your page.

    I hope this clarifies a bit. Let us know if you need any further assistance. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.