PHP Tutorial

Content Hider Slider

If you have one 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 PHP Junction
Thursday , 29th February, 2024
You have an unknown version! --- You really need to upgrade because we can't detect which APP you have either!

Latest news

We have added PHP articles to our website!
The first article is how to make a dynamic Date Dropdown Menu that takes leap year into consideration. Dropdown Menu
Another article is about how to make the Hider bar that displays this window. Content Hider

PHP Newsletter 1.2.1 has been released!

PHP Newsletter is our premier APP. 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.
Download it Now!

PHP Calendar 1.2 has been released!

PHP Calendar is an Events sheduler that is great for groups and teams! You can allow users to schedule events or you can restict scheduling to Admin only! Admin can schedule events through the password protected control panel. Admin can view and edit Events, manage registrations, and more!
Download it Now!

PHP Guestbook 1.5 has been released!

V1.5 is the PHP version of EZGuestbook 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!
Download it Now!

PHP Poll 1.2 is available for download!

PHP Poll is here! You can add and delete polls or review past polls. Choose if you want to display the results before or after voting. Choose if they can change their votes. You add the poll to your PHP page with one line of code and is mobile friendly. The Admin section is password protected.
Download it Now!

PHP Media has been released!

PHP Media 1.0 Will display your audio and video files as download links! Just change one line of code and put it in a folder with your files!
Download it Now!

PHP Junction is the home for PHP APPs! Check it out.
ASP Junction is the home for ASP APPs! Check it out.

Show More

Font Awesome 4.7.0 was used for the arrows. You can use your own icons and 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></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!