Open/closed function [closed]

I’ve sourced the CSS from

https://codepen.io/vram1980/pen/Kyaie

all credit above. Putting it with your function, you can do something like this:

add_shortcode( 'linestatus', 'line_status_handler' );
function line_status_handler( $atts ) { 
    extract( shortcode_atts( array( 
        'open_time' => '09:00:00', 
        'closed_time' => '17:00:00', 
        'open_text' => 'our lines are open', 
        'closed_text' => 'our lines are closed', 
    ), $atts ) ); 

    $opened = (time() >= strtotime( $open_time )) ? true : false;
    $notClosed = (time() <= strtotime( $closed_time )) ? true : false;;

    $status = ($opened &&  $notClosed) ? 'open' : 'closed';

    add_action('wp_footer',function(){
        ?>
        <style>
        .ring-container {
            position: relative;
            height: 50px;
        }

        .circle {
            width: 15px;
            height: 15px;
            background-color: #62bd19;
            border-radius: 50%;
            position: absolute;
            top: 23px;
            left: 23px;
        }
        .ringring {
            border: 3px solid #62bd19;
            -webkit-border-radius: 30px;
            height: 25px;
            width: 25px;
            position: absolute;
            left: 15px;
            top: 15px;
            -webkit-animation: pulsate 1s ease-out;
            -webkit-animation-iteration-count: infinite; 
            opacity: 0.0
        }

        .ring-container--closed .circle {
            background-color: red;
        }
        .ring-container--closed .ringring {
            border: 3px solid #ff7777;
        }

        @-webkit-keyframes pulsate {
            0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
            50% {opacity: 1.0;}
            100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
        }
        </style>
        <?php
    });

    return '
    <div class="ring-container ring-container--'.$status.'">
        <div class="ringring"></div>
        <div class="circle"></div>
    </div>'; 

}

You’ll probably want to throw that CSS in a stylesheet of your theme. I’ve wrapped it in an anonymous function with the footer hook so it lands at the bottom of the screen instead of wherever the shortcode is.