ASP Tutorial

Content Hider

If you have one of the newer versions of our APPs then you have seen this on the main admin page.
If not then you need to download and install one now! Hurry while supplies last!


News from ASP Junction
Wednesday, 13 November, 2024
You have EZNewsletter -- Your version is not up to date!
Your Version 2.5 - Current Version 5.0
Download Version 5

Latest news

A lot has been going on here at ASP Junction. You may have noticed the website changed a couple of times. We tried wordpress and were not impressed with the speed of the site so we decided to mirror PHP Junction and we think it turned out well

All of the EZCodes have been rewritten; the looks were updated and polished (still using baseline) and features like assigning Administrators and setting options were added. Check them all out!

EZNewsletter V5

EZNewsletter 5 is our premier APP and has been completely rewritten. It is mobile friendly across all devices. It is very robust and gives you full control over your newsletters! Create multiple Templates. Add email addresses directly from the control panel. Add multiple Admins and assign rights to them. Edit user friendly end messages. You can upload images for use in the newsletter. SMTP Debug feature for checking problem email addresses. Add Attachments and send in either Plain text or HTML. As always it is double opt-in. This script is totally customizable...totally EZ! Details...
Download it Now!

EZGuestbook 4 has been released!

EZGuestbook 4 has been released and is mobile friendly! You can Edit/Delete entries as well as ban IP's for spamming. You can add/delete the "Site Visited" and "How did you find us?" options. You can decide in what order you want to display the entries as well as how many you want to show per page...all in a sleek new look! Details...
Download it Now!

EZScheduler is now EZCalendar!

Scheduling an event with EZCalendar is as easy as entering the name and date of the event, whether or not to allow registration for the event, and any information about the event, then pressing a button. You can schedule more than one event for any given day. Participents can easily register for Events if Registration is enabled! Details...
Download it Now!

EZPoll v4

EZPoll 4 is a straight forward poll that is lightweight and easy to implement. With just one line of code you can display the poll on any ASP page within your website. It features the standard poll layout as well as the total number of votes. If admin allows it, a link to view the results is provided, otherwise, they can't see the results until they vote. Details...
Download it Now!

PHP Junction is the home for PHP APPs, Articles, and Tutorials! Check it out.

Show More

Font Awesome 4.7.0 was used for the arrows. You can use your own icons or PNGs.
Now the code.
                    

    <style>
    div.thecontent {
        float:left;
        position:relative;
        display:block;
        width:100%;
    }

    div.show-more{
        float:left;
        position:absolute;
        left:0;
        bottom:0;
        display:block;
        height:30px;
        padding-top:7px;
        background-color:#5a5a5a;
        color:#ffffff;
        cursor:pointer;
        width:100%;
        border-radius:4px;
    }
    </style>
    <script type="text/javascript">
    function toggle_visibility() {
        if (document.getElementById("show-content").style.height == "100px") {
        var t = document.getElementById("show-content").scrollHeight;
        document.getElementById("show-content").style.height = (t + 10).valueOf() + "px",
        document.getElementById("more-content").innerHTML = "<i class='fa fa-arrow-up'></i> Show Less <i class='fa fa-arrow-up'></i>"
        } else {
        document.getElementById("show-content").style.height = "100px",
        document.getElementById("more-content").innerHTML = "<i class='fa fa-arrow-down'></i> Show More <i class='fa fa-arrow-down'></i>"
        }
    }
    </script>

    <div class="thecontent" style="height:100px;overflow:hidden;transition:height 2s linear;-webkit-transition: height 2s linear;" id="show-content">

        ....Big wall of text goes here...

        <div id="more-content" class="show-more" style="text-align:center;" onclick="toggle_visibility()"><i class='fa fa-arrow-down'></i> Show More <i class='fa fa-arrow-down'></i></div>
    </div>
                    
                

We begin with some positioning and styling. The div with class 'show-more' is absolutely positioned inside and at the bottom of the div with class 'thecontent' and is the Show More/Show Less bar and is 30px in height. The parent div 'thecontent' in it's initial state is 100px in height so 70px of the content is showing. You can play with those to suit your needs.

When the bar is clicked it calls the toggle_visibility function and first checks the state of the div with id 'show-content' (same as div with class 'thecontent'). If it's in it's initial state of 100px in height it changes the height of the div to the scroll height of the content plus 10px. the transition CSS property in the inline style sets the speed and type of transition. It also sets the text in the bar to 'Show less' with up arrows

If the content is expanded it resets everything to it's initial state.

It's simple and straight forward and yet pretty cool!