"animated accordion"
Bootstrap 4.1.1 Snippet by ronnydodd

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script> <div class="accordion"> <ul class="accordion__list"> <li class="accordion__item" id="AllStaff"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">All-Staff Courses</h3> <div class="accordion__itemIconWrap"> <em class="fa fa-angle-up" aria-hidden="true"></em> </div> </div> <div class="accordion__itemContent"> <div class="container CourseContainer"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/COVID-19(2)COVID-19SocialDistancing_PersonalHygiene.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">COVID-19: Social Distancing & Personal Hygiene</h5> <p> It's important to know about COVID-19, social distancing and personal hygiene to not only protect yourself but also to do your part in preventing the spread. There is currently no vaccine to prevent coronavirus disease 2019 (COVID-19). Information contained in this course is based on the CDC and World Health Organization. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/COVID-19Covid-19Prevention.jpeg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">Covid-19: Prevention</h5> <p> Learn the basics about the coronavirus, its background, and how to best deal with the threat it poses to you, your family and community. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/AS001Anti-Harassment.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">AS001 Anti-Harassment</h5> <p> Learn how to provide a harassment-free environment for team members, as well as guests. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> Online / Virtual </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/AS010BowlingCenterSafety–1.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">AS010 Bowling Center Safety - 1</h5> <p> Learn about the following in this course: Slips, Trips & Falls, Safeguarding, Lifting and incident investigation. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/AS020BowlingCenterSafety–2.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">AS020 Bowling Center Safety – 2</h5> <p> Learn about the following in this course: Lockout/Tagout, Electrical Safety, Storage Safety and Potential Emergencies. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/AS030BowlingCenterSafety–3.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">AS030 Bowling Center Safety – 3</h5> <p> Learn about the following in this course: Food, Fire and Chemical Safety. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/AS040ActiveShooterPreparedness.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">AS040 Active Shooter Preparedness</h5> <p> Learn how to deal with an active shooter situation based on materials from the US Department of Homeland Security and FEMA. Preparedness and Awareness are keys to helping protect our team members, our guests and ourselves. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/AS050RobberyPreparedness.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">AS050 Robbery Preparedness</h5> <p> Learn what to do and how to handle a robbery in the center. While we might not think about being robbed, it is better to be prepared and understand what to do before, during and after a robbery. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/AS060IncidentResponse_Reporting.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">AS060 Incident Response & Reporting</h5> <p> Learn some basics of what to do when an incident happens at your facility. The proper responding and reporting aids the prevention of future incidents and also provides a safe and fun environment for our guest and team members. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/AS080SocialMediaAwareness.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">AS080 Social Media Awareness</h5> <p> Train employees to understand what social media is and how to make the right choices when using it. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CPR01CPRBasicsforEveryone-AdultandChild.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CPR01 CPR Basics for Everyone – Adult & Child</h5> <p> Identifying what to do in an emergency, can be the difference between life and death.* <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CPR02InfantCPRBasics.jpeg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CPR02 Infant CPR Basics</h5> <p> Learn emergency techniques on what to do with an infant in an emergency, which can be the difference between life and death.* <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> </div> </div> </li> <li class="accordion__item" id="FrontLineCS"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Customer Service - Frontline</h3> <div class="accordion__itemIconWrap"> <em class="fa fa-angle-up" aria-hidden="true"></em> </div> </div> <div class="accordion__itemContent"> <div class="container CourseContainer"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/images/BUCourses/CS100CustomerService-ServiceStandardsIntroduction.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS100 Customer Service - Service Standards Introduction</h5> <p> You are new to the team and the boss says it is important to take great care of the guests and create a great guest experience! Sounds great, but what does that really mean, and more importantly how do you even do that? This course will start to answer those questions for you and set you up for success in your new position! <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CS101TelephoneEtiquette.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS101 Telephone Etiquette</h5> <p> Train employees to understand the seven steps to perfect telephone etiquette. <br /> <br /> <strong>Approximate time: 25 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CS102NavigatingandReducingCustomerComplaints.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS102 Navigating and Reducing Customer Complaints</h5> <p> Train team members to utilize methods and approaches in handling customer complaints. <br /> <br /> <strong>Approximate time: 25 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CS111CustomerService–ServiceStandardsSTART.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS111 Customer Service – Service Standards START *</h5> <p> <strong>START</strong> is a trainable, easy to execute set of service standards that are ready for your team to embrace. Providing a great guest experience starts with defining what your service standards are, and the <strong>START</strong> program provides you an option to utilize. <br /> <br /> <strong><br /> Approximate time: 25 mins. </strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CS112CustomerService–ServiceStandardsZingermans.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS112 Customer Service – Service Standards Zingerman’s *</h5> <p> What started out as a corner deli with great food, Zingerman’s name has become synonymous with providing an incredible guest experience. Learn Zingerman’s service standards that include 3 steps to great service and 5 steps to effectively handling guest complaints. <br /> <br /> <strong><br /> Approximate time: 25 mins. </strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS100IncreasingGuestFrequency-BowlingTeamMembers.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS100 Increasing Guest Frequency - Bowling / Team Members</h5> <p> Regardless if your business model is traditional with a high percentage of league bowling or a Bowling Entertainment Center with predominantly casual bowling, getting guests to come back more often WILL increase revenue. This course teaches you the service standards that every team member needs in order to be able to “ASK” your guests to bowl more often. More guests bowling more often provides a healthy and productive work environment for all. <br /> <br /> <strong>Approximate time: 25 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> </div> </div> </li> <li class="accordion__item" id="FrontLineFB"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Food and Beverage - Frontline</h3> <div class="accordion__itemIconWrap"> <em class="fa fa-angle-up" aria-hidden="true"></em> </div> </div> <div class="accordion__itemContent"> <div class="container CourseContainer"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB010FoodandBeverageSalesandService.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB010 Food & Beverage Sales and Service</h5> <p> Identify best practices within food and beverage to provide exceptional customer service – no matter if your center has a snack bar or a full service restaurant. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB100FoodSafety_SanitationforTeamMembers.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB100 Food Safety & Sanitation (for Team Members)</h5> <p> Food safety and sanitation is a critical part of the guest experience and necessary to keep guests from becoming ill or worse, by consuming contaminated food. This course will review the causes of food-borne illness and provide general and basic information and measures used in reducing the risk of food-borne illness in your food service operation. The contents are supplemental to and are not a replacement for in house training by a qualified supervisor or recognized food safety courses which may be required by your local health department. <br /> <br /> <strong>Approximate time: 20 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS212-Email%20Course%20Image.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB101 Alcohol Awareness (for Team Members) **</h5> <p> Whether you serve alcohol or not, every team member has a role to play in ensuring your guests consume alcohol in a legal, safe, and socially responsible manner. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB102ServingAlcoholResponsibly.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB102 Serving Alcohol Responsibly **</h5> <p> The primary responsibility as a server of alcohol is to ensure your guests consume alcohol in a legal, safe, and socially responsible manner. After completing this course you will understand how alcohol progressively affects your guests, be able to identify signals of various stages of intoxication, learn strategies for preventing over-serving as well as how to deal with a guest that has become intoxicated. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB104PortionControlforTeamMembers.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB104 Portion Control (for Team Members)</h5> <p> <!-- <em>Recommended Prerequisite Courses: <br> Customer Service – Introduction to Service Standards </em><br> <br> --> <strong>START</strong> is a trainable, easy to execute set of service standards that are ready for your team to embrace. Providing a great guest experience starts with defining what your service standards are, and the <strong>START</strong> program provides you an option to utilize. <br /> <br /> <strong>Approximate time: 25 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> </div> </div> </li> <li class="accordion__item" id="CSManagement"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Customer Service - Management</h3> <div class="accordion__itemIconWrap"> <em class="fa fa-angle-up" aria-hidden="true"></em> </div> </div> <div class="accordion__itemContent"> <div class="container CourseContainer"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CS200CreatingMission_Vision__ValuesforLeaders.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS200 Creating Mission, Vision, & Values for Leaders</h5> <p> Once a process reserved for larger companies, today ANYONE that leads a group of any size needs to understand what company culture is and how it impacts every aspect of the group you lead. Learn the importance of and how to develop the Mission, Vision, and Values for your team. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CS201CustomerService-DevelopingServiceStandardsforLeaders.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS201 Customer Service-Developing Service Standards for Leaders</h5> <p> Everyone knows what great customer service looks like, we know it when we see it, but how do you define it? Most organizations that stumble with customer service have not been able to define what acceptable customer service looks like for their business. This course not only helps you define the new customer service but guides you in how to turn that definition into standards. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CS202CustomerService-ExecutingServiceStandardsforLeaders.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS202 Customer Service-Executing Service Standards for Leaders</h5> <p> You have developed your Service Standards for your business and defined what the guest experience will look like. Now it is time to teach them and bring them to life with the team. This course will share some different training styles for your consideration and discuss how to engage new as well as existing team members to execute your Service Standards day in and day out. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/CS203CustomerService-MeasuringServiceStandardsforLeaders.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">CS203 Customer Service-Measuring Service Standards for Leaders</h5> <p> In business, what gets measured gets managed! Now that you have developed and trained your team members to your service standards, how do you know they are being followed? No news is good news is NOT the strategy of choice. This course will discuss how to measure the guest experience as well as understanding why recognizing team members for delivering great guest service matters. <br /> <br /> <strong><br /> Approximate time: 30 mins. </strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> </div> </div> </li> <li class="accordion__item" id="FBManagement"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Food and Beverage - Management</h3> <div class="accordion__itemIconWrap"> <em class="fa fa-angle-up" aria-hidden="true"></em> </div> </div> <div class="accordion__itemContent"> <div class="container CourseContainer"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB200FoodSafetyandSanitationTrainingForLeaders.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB200 Food Safety and Sanitation Training (For Leaders)</h5> <p> Food safety and sanitation is a critical part of the guest experience and necessary to keep guests from becoming ill or worse, by consuming contaminated food. As a leader responsible for a foodservice operation, it is imperative that your front line team members receive complete training on the causes of foodborne illness from a certified trainer. This course is intended to reinforce the need to develop and implement a comprehensive food safety training program. The contents are supplemental to and are not a replacement for a qualified supervisor becoming certified in a recognized food safety course which may be required by the local health department. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB201FoodServiceCostMetrics.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB201 Food Service Cost Metrics</h5> <p> Food Service holds as much potential as it does complexity. Knowing and understanding the fundamental cost of goods metrics and applying this knowledge in an actionable way will help you achieve higher guest satisfaction and profits. This course provides an understanding and working knowledge of Menu Item Cost, Cost of Goods Percentage, Potential Cost of Goods (for the entire menu), Actual Cost of Goods Sold and Actual Cost of Goods Sold Percentage. These metrics are the foundation of food and beverage operations for the student progressing through Bowling University On-Demand Food and Beverage courses. <br /> <br /> <strong>Approximate time: 20 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB202DevelopingStandardizedRecipes.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB202 Developing Standardized Recipes</h5> <p> What are standardized recipes and why are they necessary to your food and beverage operation? You will learn that by instituting standard recipes, you can ensure the consistency and quality of your menu items at a predictable cost so you can better manage your operation's bottom line. <br /> <br /> <strong>Approximate time: 18 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB203PortionControlforManagers.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB203 Portion Control (for Managers)</h5> <p> For your guests to return, they demand predictability in taste, appearance and portions that meet their expectations. One of the best ways to become successful in food and beverage is to serve standardized and consistent portions. In this course we will learn why portion control is important in food and bar service, how it can be accomplished, and provide real life examples of how your operation can become more profitable. <br /> <br /> <strong><br /> Approximate time: 30 mins. </strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB204Purchasing_ReceivingandStorage.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB204 Purchasing, Receiving and Storage (for Foodservice Leaders)</h5> <p> From the time it’s ordered until it reaches your guest, the food you serve follows steps called, “The Flow of Food”. Just how many steps there are will depend on your style of foodservice and your menu offerings. So, while there may be anywhere from 2 – 6 steps until your guest gets to enjoy your menu, it’s safe to say the first 3 steps, Purchasing, Receiving and Storage are constant. This course will provide insight and best practices to each of these critical functions to assist the operation in running an efficient, profitable, and safe foodservice operation. <br /> <br /> <strong><br /> Approximate time: 30 mins. </strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB205FoodInventoryManagement.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB205 Food Inventory Management</h5> <p> Controlling and monitoring inventory is a constant challenge for foodservice. Ordering too much product can result in waste, spoilage, theft, and tie up cash on your storage shelves. Under-order and you risk losing sales and having unhappy guests. Learn how an effective inventory management system can be the difference between losing money and making a profit. <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB206StrategicPricingforFoodserviceOperations.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB206 Strategic Pricing for Foodservice Operations</h5> <p> Are your menu prices optimal? If the answer is “I don’t know” or “No”, you need to set out and strategically review your pricing. In this course we will review what various strategies to pricing should be considered in order to maximize food sales and profitability. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB207CalculatingPrimeCostforFoodandBeverage.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB207 Calculating Prime Cost for Food and Beverage</h5> <p> Prime cost is one of the most important KPI’s or Key Performance Indicators for your food & beverage operation. Knowing and analyzing your prime cost is a financial tool and guidepost to help you manage the operations pricing structure, labor model, and budgeted spending to ensure you meet your profit margin goals. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB208MenuEngineeringPart1–Analyticstoaprofitablemenu.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB210 Menu Engineering Part 1 – Analytics to a profitable menu</h5> <p> What are your menu sales telling you? Understanding your menu thru metrics as presented by the Menu Engineering Model is crucial to running profitable food service. This course will show you how to compile and analyze your data, segment your menu items using profitability and popularity of each item and then offer strategies for improving your food service and overall facility bottom line. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/FB209MenuEngineeringPart2–Designingaprofitablemenu2.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">FB211 Menu Engineering Part 2 – Designing a profitable menu</h5> <p> Now that you have completed part one of Menu Engineering, analyzed your menu and determined Stars, Plow Horses, Puzzles and Dogs, it’s time to design your menu and highlight your high margin items. Menu Engineering Part 2 provides an overview of best practices in both menu board and printed menu design and layout to help you improve efficiencies in front and back of house operations, improve the guest ordering experience and increase your foodservice bottom line. <br /> <br /> <strong>Approximate time: 20 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> </div> </div> </li> <li class="accordion__item" id="MarketingManage"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Marketing - Management</h3> <div class="accordion__itemIconWrap"> <em class="fa fa-angle-up" aria-hidden="true"></em> </div> </div> <div class="accordion__itemContent"> <div class="container CourseContainer"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS200IncreasingGuestFrequency-BowlingManagement.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS200 Increasing Guest Frequency - Bowling / Management</h5> <p> Regardless if your business model is traditional with a high percentage of league bowling or a Bowling Entertainment Center with predominantly casual bowling, getting guests to come back more often will increase your profitability. This course gives you the service standards to teach ALL your team members to “ASK” your guests to bowl more often. In addition to the “how to”, students are provided the resource materials to have guests bowling more often immediately. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS201Demographics-KnowYourMarket.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS201 Demographics - Know Your Market</h5> <p> While you may know a lot about your current guests, do you really know the demographics of your market? It is more important than ever to understand the demographic makeup of the market your business is located in including age, race, gender, and income. This course will walk you through all of that and why it matters in your marketing planning and execution. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS202StrategicMarketing.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS202 Strategic Marketing</h5> <p> Know Your Market<br /> <br /> You would never build a new house without a blueprint, yet small businesses often start marketing without a plan! This course will introduce you to Strategic Marketing for small businesses and the importance of building your marketing blueprint. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS203ElementsforEffectiveMarketingCampaigns.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS203 Elements for Effective Marketing Campaigns</h5> <p> Is there really a difference between Marketing, Advertising, and Sales? Don’t they all really mean the same thing? While these terms might feel like they are interchangeable, the fact is they are vastly different. Understanding what each of them mean and where they fit in your business building efforts is critical. This course will not only help you define each of them but show you the 7 Step Process to building your centers future marketing campaigns. <br /> <br /> <strong><br /> Approximate time: 30 mins. </strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS204MarketingReturnonInvestment.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS204 Marketing Return on Investment</h5> <p> It has been said in marketing circles that half of all marketing works! The challenge is you just do not know which half! This course will help you budget, track and analyze your marketing spend so you know your return on investment. <br /> <br /> <strong><br /> Approximate time: 30 mins. </strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS205StrategiesforDevelopinganAnnualMarketingPlan.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS205 Strategies for Developing an Annual Marketing Plan</h5> <p> What does Culture have to do with it?<br /> It is said “Luck is what happens when preparation meets opportunity.” Are you prepared to create your own luck by preparing for the next opportunity? Starting with the big picture in mind, this course provides strategies to identify growth opportunities and implement an annual sales and promotions plan. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS206OutsideSalesforNon-Salespeople.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS206 Outside Sales for Non-Salespeople</h5> <p> Operating a bowling center or bowling-based entertainment center is more challenging than ever. Not only are you responsible for the day-to-day operations, you now are responsible for getting outside the four walls and generating business. This course will share with you the steps to grow your revenue without the need to be a great salesperson. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS207RevenueManagement.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS207 Revenue Management</h5> <p> Based on the book <em>Revenue Management Hard-Core Tactics for Marketing Domination</em> by Robert Cross, this course will help you understand what revenue management is and how to use it in your facility. Increasing volume is only ½ the equation, understanding how to maximize revenue is equally important. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS210FoundationforDigitalMarketingSuccess.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS210 Foundation for Digital Marketing Success</h5> <p> Understanding how websites, SEO and databases fit into the digital marketing ecosystem and the importance of having knowledge if you are working with a third-party, doing it yourself or a combination of both. <br /> <br /> <strong>Approximate time: 25 mins.</strong> </p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS211DigitalMarketing—Facebook.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS211 Digital Marketing—Facebook</h5> <p> Students will continue to understand the digital marketing ecosystem and how social media fits into the overall digital marketing for the center and why Facebook is where they should begin. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS212DigitalMarketing—Email.png" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS212 Digital Marketing—Email</h5> <p> Turns out the rumors on the death of email as a successful marketing tool have been greatly over exaggerated! Email marketing IS a powerful tool and should be part of your overall digital marketing efforts. Bowling University will share the Top 12 Email Best Practices to help grow your revenue. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/MS213DigitalMarketing–SMSTextMessaging.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">MS213 Digital Marketing – SMS (Text Messaging)</h5> <p> While there is growing research that suggests as a society, we are becoming addicted to our smart phones, savvy small business operators are leveraging that medium to connect and grow revenue through SMS Marketing. This course will not only introduce you to SMS Marketing but discuss best practices, marketing ideas, and mistakes to avoid. <br /> <br /> <strong>Approximate time: 30 mins.</strong> </p> </div> </div> </div> </div> </div> </div> </div> </li> <li class="accordion__item" id="OperationsManage"> <div class="accordion__itemTitleWrap"> <h3 class="accordion__itemTitle">Operations - Management</h3> <div class="accordion__itemIconWrap"> <em class="fa fa-angle-up" aria-hidden="true"></em> </div> </div> <div class="accordion__itemContent"> <div class="container CourseContainer"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/OS200SMARTGoalSetting–WhyGoalsMatter.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">OS200 SMART Goal Setting– Why Goals Matter</h5> <p> In today's hyper fast paced business environment, everyone is busy. However, being busy is NOT the same as being productive. The best leaders understand that setting goals for themselves and their team is critical for your personal success and the success of the organization. SMART Goal Setting is the start of turning activity into action! <br /> <br /> <strong>Approximate time: 20 mins.</strong> </p> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/OS201Staffing-TalentAcquisitionRecruiting.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">OS201 Staffing - Talent Acquisition Recruiting</h5> <p> This is the first of three Talent Acquisition courses. One of the greatest challenges facing ALL businesses today, and especially small businesses, is the area of staffing. </p> <ul> <li> Where has all the good help gone? </li> <li>Doesn’t anyone want to work anymore?</li> </ul> This course will help you rethink the way you look at recruiting and learn where and how to become the employer of choice in your community. <br /> <br /> <strong>Approximate time: 25 mins.</strong> <div class="block_header"> </div> </div> </div> </div> </div> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="/portals/21/Images/BUCourses/OS202Staffing-TalentAcquisitionInterviewing_Selection.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">OS202 Staffing - Talent Acquisition Interviewing & Selection</h5> <p> The second of three Talent Acquisition courses. <br /> Interviewing is a learned skill and one that many leaders struggle with. Understanding the different types of interviews and which one is best for you and your center is critical. Should you be conducting…. </p> <ul> <li> Single Interviews</li> <li>Multiple Interviews</li> <li>Behavioral Interviews</li> <li>Peer Review Interviews</li> <li>Group Interviews</li> </ul> This course will teach you about each of the different interview options and help you determine which one is best for you. <br /> <br /> <strong>Approximate time: 30 mins.</strong> <div class="block_header"> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color: #cccccc; width: 352px; height: 255px;"> <img alt="" src="https://bowlingUniversity.net/portals/21/Images/BUCourses/OS203Staffing-TalentAcquisitionOnboarding.jpg" class="img-responsive" /> <div class="black_hover_block"> <div class="blur"> </div> <div class="black_hover_block_text"> <h5 class="titl-h5">OS203 Staffing - Talent Acquisition Onboarding</h5> <p> The third and final of three Talent Acquisition courses.</p> <p>You have made the offer and they accepted, now what? The final step in Talent Acquisition is to properly onboard your new team member and set them up for success and not failure. Learn why team members are currently leaving your center and what you can do to improve retention.</p> <p><strong><br /> Approximate time: 30 mins. </strong></p> <div class="block_header"> </div> </div> </div> </div> </div> </div> </div> </div> </li> </ul> </div>
.accordion { max-width: 1280px; margin: 0 auto; } .accordion__itemTitle { margin: 0; font-family: 'industry', sans-serif; font-weight: 700; font-size: 1em; position: relative; z-index: 10; color: #fff; } .accordion__list { list-style: none; margin: 0; padding: 0; } .accordion__item { border-bottom: 1px solid #000; visibility: hidden; } .accordion__item:last-child { border-bottom: 0; } .accordion__item.is-active .accordion__itemTitleWrap::after { -webkit-transform: translateX(-20%); transform: translateX(-20%); } .accordion__item.is-active .accordion__itemIconWrap { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .accordion__itemTitleWrap { display: flex; height: 2.5em; align-items: center; padding: 0 1em; color: #fff; cursor: pointer; position: relative; overflow: hidden; } .accordion__itemTitleWrap::after { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: #3bade3; background: linear-gradient(45deg, #003D7D 0%, #4C0000 40%, #4C0000 51%, #4C0000 100%); z-index: 1; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } .accordion__itemTitleWrap.is-active::after, .accordion__itemTitleWrap:hover::after { -webkit-transform: translateX(-20%); transform: translateX(-20%); } .accordion__itemIconWrap { width: 1.25em; height: 1.25em; margin-left: auto; position: relative; z-index: 10; } .accordion__itemContent { font-size: 0.875em; height: 0; overflow: hidden; background-color: #fff; padding: 0 1.25em; } .accordion__itemContent p { margin: 2em 0; } .pad0 { padding:0px; } .bg_black{ background:#000; } .block-blog { width: 100%; height: auto; padding-top: 10px; padding-bottom: 10px; background-color: rgba(226, 223, 223, 0.61); } .transperent_block { padding: 0px; position: relative; overflow: hidden; height: 250px !important; width: 100% !important; } .transperent_block img { width:100%; height: 100%; } .transperent_block:hover .black_hover_block { opacity: 1; transform: translateY(-150px); -webkit-transform: translateY(-150px); -moz-transform: translateY(-150px); -ms-transform: translateY(-150px); -o-transform: translateY(-150px); } .transperent_block img { z-index: 4; } .transperent_block .black_hover_block { position: absolute; bottom: 3%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 100%; } .transperent_block:hover .black_hover_block, .black_hover_block:hover { bottom: 40%; transition: all 0.3s ease-in-out; } .transperent_block .blur { background-color: rgba(0,0,0,0.7); height: 500px; z-index: 5; position: absolute; width: 100%; } .transperent_block .black_hover_block_text { z-index: 10; color: #fff; position: absolute; height: 400px; text-align: center; top: -35px; width: 100%; background:black; } .block_header{ margin-top:5px;} .black_hover_block_text i:hover { color: #77132f; } .black_hover_block_text i { padding: 10px 10px; font-size: 18px; color: #fff; } .black_hover_block_text i:hover { color:#ffffffa6} .black_hover_block_text:hover .titl-h5 { background-color: rgba(119, 19, 47, 0.60); } .titl-h5 { border-top: 2px solid #77132f; border-bottom: 2px solid #77132f; padding: 10px; margin-top: 0px; line-height: 14px; text-transform:uppercase; color:#fff; } .btn-pink { background-color: #77132f; color: #fff; border: 4px solid #77132f; } .btn-pink:hover{ color: #fff; background-color: #6f0f2a9e; border: 4px solid #6f0f2a4e; } .btn-sm { margin-top: 10px; } .black_hover_block_text li:hover { background-color: #77132f; cursor: pointer; color: #fff; width: 33.34%; } .black_hover_block_text li { list-style: none; border: none !important; } .CourseContainer p { color: #fff; text-align: left; padding: 10px; font-size: 14px; line-height: 16px; } .CourseContainer .row { margin: 10px; }
var Accordion = function() { var toggleItems, items; var _init = function() { toggleItems = document.querySelectorAll('.accordion__itemTitleWrap'); toggleItems = Array.prototype.slice.call(toggleItems); items = document.querySelectorAll('.accordion__item'); items = Array.prototype.slice.call(items); _addEventHandlers(); TweenLite.set(items, {visibility:'visible'}); TweenMax.staggerFrom(items, 0.9,{opacity:0, x:-100, ease:Power2.easeOut}, 0.3); }; var _addEventHandlers = function() { toggleItems.forEach(function(element, index) { element.addEventListener('click', _toggleItem, false); }); } var _toggleItem = function() { var parent = this.parentNode; var content = parent.children[1]; if(!parent.classList.contains('is-active')) { parent.classList.add('is-active'); TweenLite.set(content, {height:'auto'}); TweenLite.from(content, 0.6, {height: 0, immediateRender:false, ease: Back.easeOut}); } else { parent.classList.remove('is-active'); TweenLite.to(content, 0.3, {height: 0, immediateRender:false, ease: Power1.easeOut}); } }; return { init: _init }; }(); Accordion.init();

Related: See More


Questions / Comments: