Extra Content Slides on Click

slider-toggle-extracontent.js

<style>
    section.slide-extra-content{
        display: none;
        position: absolute;
        margin-left: 0;
        margin-right: 0;
        bottom: 0;
        max-width: 92%;
    }
    @media screen and (max-width:1024px){
        section.slide-extra-content{
            max-width: 90%;
        }
    }
    
    
    @media screen and (max-width:767px){
        section.slide-extra-content{
            max-width: 88%
        }
        
    }
    
    .blurry-slide{
         -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100%;
  height: 100%;
  background-color: #ccc;
    }
</style>
<script>
    jQuery(document).ready(function($){
        jQuery('a.open-slide').click(function(){
            event.preventDefault();
            jQuery('section.slide-extra-content').slideToggle("slow");
            jQuery('div.slider-inner-1').addClass('blurry-slide');
            
        });
        
        jQuery('.section-close a').click(function(){
            event.preventDefault();
           jQuery('section.slide-extra-content').slideToggle("slow"); 
            console.log('hide');
            jQuery('div.slider-inner-1').removeClass('blurry-slide');
        });
  });

</script>