Hi there,
So I have an accordion that displays an icon in the open and closed states. The problem that I'm having is that when i place a hyperlink in the copy it adds the icon as well. The icons are set in the main wrapper class. Since I need the icons for the open and close state and the hyperlinks as well I'm not sure how to handle this.
Thanks for any help.
Here is the code.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='<a href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" target="_blank">https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css</a>'>
<style>
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.accordcontainer {
margin: 0 auto;
padding: 2rem;
width: 81rem;
}
h3 {
font-size: 1.5rem;
color: #373d51;
padding: 1.3rem;
margin: 0;
}
.faqtitle{
padding-left:15px;
font-family: 'Roboto Slab', serif;
}
.accordion a {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
padding: 1rem 3rem 1rem 1rem;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border-bottom: 1px solid #e5e5e5;
}
.accordion a:hover,
.accordion a:hover::after {
cursor: pointer;
color: #03b5d2;
}
.accordion a:hover::after {
border: 1px solid #03b5d2;
}
.accordion a.active {
color: #03b5d2;
border-bottom: 1px solid #03b5d2;
}
.accordion a::after {
font-family: 'Ionicons';
content: '\f218';
position: absolute;
float: right;
right: 1rem;
font-size: 1rem;
color: #7288a2;
padding: 5px;
width: 30px;
height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 1px solid #7288a2;
text-align: center;
}
.accordion a.active::after {
font-family: 'Ionicons';
content: '\f209';
color: #03b5d2;
border: 1px solid #03b5d2;
}
.accordion .content {
opacity: 0;
padding: 0 1rem;
max-height: 0;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
clear: both;
-webkit-transition: all 0.2s ease 0.15s;
-o-transition: all 0.2s ease 0.15s;
transition: all 0.2s ease 0.15s;
}
.accordion .content p {
font-size: 1rem;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.accordion .content.active {
opacity: 1;
padding: 1rem;
max-height: 100%;
-webkit-transition: all 0.35s ease 0.15s;
-o-transition: all 0.35s ease 0.15s;
transition: all 0.35s ease 0.15s;
}
@media only screen and (max-width: 768px) {
.accordcontainer {
width: 40rem;
}
}
@media only screen and (max-width: 600px) {
.accordcontainer {
width: 25rem;
}
}
@media only screen and (min-width: 768px) {
.accordcontainer {
width: 60rem;
}
}
@media only screen and (min-width: 1280px) {
.accordcontainer {
width: 80rem;
}
}
/* text link styles */
.accordion2 {
padding:0rem !important;
font-size:1rem !important;
border-bottom:0px !important;
}
.accordion2 a::after {
content: '' !important;
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="accordcontainer">
<h3 class="faqtitle">General FAQs</h3>
<div class="accordion">
<div class="accordion-item">
<a>When and where is Premier’s 2020 Breakthroughs Conference and Exhibition? </a>
<div class="content">
<p>June 23-26, 2020 in Nashville, Tennessee, at the Gaylord Opryland Resort & Convention Center.</p>
</div>
</div>
<div class="accordion-item">
<a>Who should attend Breakthroughs 2020?</a>
<div class="content">
<p>Breakthroughs is Premier’s annual knowledge sharing and collaboration event for Premier members that is designed to bring people, ideas and innovations together to transform healthcare. You’ll join more than 4,000 like-minded healthcare decision-makers and peers working together to create real solutions to transform healthcare.</p>
</div>
</div>
<div class="accordion-item">
<a>Where can I find the conference agenda? </a>
<div class="content">
<p>The 2020 Breakthroughs Conference agenda can be found on the Breakthroughs website<a class="accordion2" href='<a href="http://breakthroughs.premierinc.com/'>here</a></p" target="_blank">http://breakthroughs.premierinc.com/'>here</a></p</a>>
</div>
</div>
<div class="accordion-item">
<a>How much does it cost for Premier members to attend Breakthroughs 2020?</a>
<div class="content">
<p>There is no cost for Premier members to register for Breakthroughs 2020. For travel and hotel information, click here.</p>
</div>
</div>
<div class="accordion-item">
<a>When does general registration open for Premier members?</a>
<div class="content">
<p>Registration will open in early March 2020. To get regular email updates about Breakthroughs 2020, <a href="<a href="http://offers.premierinc.com/BRK20---Subscribe_BRK20-Subscribe-LP.html">click" target="_blank">http://offers.premierinc.com/BRK20---Subscribe_BRK20-Subscribe-LP.html">click</a> here.</a></p>
</div>
</div>
<div class="accordion-item">
<a>I registered but have not received a confirmation. How do I get another one sent to me?</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<a>I registered, but I'd like to add additional events to my registration. How can I do that?</a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<a>I registered as a speaker, what happens next? </a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<a>Is there a Breakthroughs Conference mobile app? </a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<div class="accordion-item">
<a>How can I stay informed on the latest about Breakthroughs 2020?</a>
<div class="content">
<ul>
<li>Check back here regularly for the latest on general session speakers, education sessions, networking activities and more. You can find additional information about this year’s conference on the Breakthroughs Conference and Exhibition Community on PremierConnect<sup style="font-size:10px;">®</sup>. </li>
<li>Stay in the loop on conference speakers, agenda and registration information by subscribing to email updates about Premier's 2020 Breakthroughs Conference & Exhibition.</li>
<li>Follow @PremierHA on Twitter to stay up to date on all things #Breakthroughs20.</li>
<li>If you have specific questions, email XXX. </li>
</ul>
</div>
</div>
<div class="accordion-item">
<a>Who do I contact if my question wasn’t answered here? </a>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
</div>
</div>
<h3 style="margin-top: 2rem;" class="faqtitle">Continuing Education FAQs</h3>
<div class="accordion-item">
<a>How much continuing education credit can I earn?</a>
<div class="content">
<p>The amount and types of credit vary depending on the professional group awarding the credit. Please refer to the Continuing Education page for details and updates on approved credit.</p>
<p>Remember that you are obligated by the standards of your professional organization to only claim credit commensurate with the extent of your actual participation in the activity.</p>
<p>IMPORTANT NOTE: Not every session is approved for every type of credit. Session offerings vary by type and number of credit hours. Approvals are based on the standards established by each individual accreditation organization. Members should consult the Types of Credit page for current approval information.</p>
</div>
</div>
<div class="accordion-item">
<a>I need more than one type of credit. How is this managed?</a>
<div class="content">
<p>When you registered for the conference, you were asked to complete the “Continuing Education Credit” section of your profile indicating the type(s) of professional continuing education units (CEU) you wish to earn. This information will be used to ensure that you receive the right type of credit.</p>
<p>If you did not complete this section, you must edit your registration profile to provide this information. The system will be unable to create your certificates without it.</p>
<p>You may edit your registration information or make changes to your sessions using the email address and password you created during the registration process. When you enter the system, click on “Edit my Registration” and continue to the “Continuing Education Credit” page. Identify all categories that apply to you.</p>
</div>
</div>
<div class="accordion-item">
<a>How will I receive my certificates?</a>
<div class="content">
<p>In order to receive credit, you must complete online session evaluations for each session you’ve attended. After completing session evaluations, the final screen contains a link for members to review, or print and save CEU certificates. Once you are satisfied that you have completed evaluations for every session attended throughout the week, you may permanently close the survey and the system will calculate the total number of credits earned.</p>
<p>You may either preview your certificate(s) to review the sessions evaluated or you may print or save your certificate(s) by clicking “Get My CE Certificate.” By selecting “Get My CE Certificate,” you will permanently close your survey and be unable to evaluate any other sessions.</p>
<p>IMPORTANT NOTE: You will only be able to access certificates based on the information you provided in your registration profile. For example, if you selected nursing and CPHQ credit in the “Continuing Education Credit” section of the registration profile, those are the only two types of certificates you will be able to access. To adjust the CEU you wish to receive, please log into your registration profile and visit the “Continuing Education Credit” section.</p>
</div>
</div>
<div class="accordion-item">
<a>I am a pharmacist or pharmacy tech. How do I claim credit?</a>
<div class="content">
<p>Due to differences in the requirements for ACPE credit, the pharmacy credit is managed by Jerry Frazier of Premier’s pharmacy department. You must follow the instructions provided in each of the sessions approved for ACPE credit. Contact jerry_frazier@premierinc.com for further information.</p>
</div>
</div>
<div class="accordion-item">
<a>How are evaluations managed?</a>
<div class="content">
<p>Premier has partnered with GuideStar Research, an independent research group, to use MeetingMetrics, an online session evaluation solution that is streamlined, user friendly and environmentally friendly. MeetingMetrics collects evaluation data and manages CE certificates. All data is maintained securely and confidentially.</p>
<p>This year, both the individual session evaluations and the post-conference evaluation will be collected online. You will receive two email different invitations from survey@guidestarco.com.</p>
<p><b>Individual session surveys -</b> On Thursday, June 25, Breakthroughs attendees will receive an email message containing an invitation to complete a brief online evaluation for each of the sessions you attended. These surveys are available 24/7 for your convenience. You may also access session evaluations by using the Breakthroughs Conference mobile app using the name and email address you provided at registration. The session evaluations are linked to your continuing education certificates and must be completed for each session attended to correctly calculate the credit hours earned.</p>
<p><b>Overall post evaluation survey -</b> On Friday, June 26, all conference attendees will receive another email containing a link to the post-conference evaluation. The overall conference evaluation is separate from the evaluations for the individual education sessions and will remain open for three weeks.</p>
</div>
</div>
<div class="accordion-item">
<a>What sessions are covered?</a>
<div class="content">
<p>This evaluation system only applies to the formal Breakthroughs Conference. Sessions include the opening general session on Tuesday, June 23 and the general sessions and member education sessions on both Wednesday, June 24 and Thursday, June 25. Pre-conference and ancillary events will be evaluated separately.</p>
</div>
</div>
<div class="accordion-item">
<a>Am I required to complete evaluations?</a>
<div class="content">
<p>Evaluations are required for anyone wanting to earn continuing education credit. If you plan to earn CEU, you should complete an evaluation for every session for which you wish to earn credit.</p>
</div>
</div>
<div class="accordion-item">
<a>How is the evaluation information used?</a>
<div class="content">
<p>Participant feedback from both the overall post-conference survey and the individual session evaluations will be used to analyze how well your professional education needs and expectations were met. This data will be used to plan improvements for future Premier events and provide individual speakers with feedback on their session.</p>
<p>Individual session data will also be forwarded to our accreditation partners as required by individual continuing education standards and existing partnership agreements.</p>
<p>Survey responses will be sent from the online questionnaires to the MeetingMetrics secure online report center for generating real-time reports and personalized CE certificates.</p>
</div>
</div>
<div class="accordion-item">
<a>Will I need a new username or password?</a>
<div class="content">
<p>No. The system generates a personalized link for each attendee so that you are automatically recognized.</p>
</div>
</div>
<div class="accordion-item">
<a>What if I don't receive or misplace my email survey links?</a>
<div class="content">
<p>You may contact Premier’s Solution Center at solutioncenter@premierinc.com or 877.777.1552, and we will provide a link to retrieve your survey.</p>
</div>
</div>
<div class="accordion-item">
<a>Can I access the survey links on my mobile device?</a>
<div class="content">
<p>Yes. The surveys are formatted for both PC and mobile devices, including smartphones and tablets.</p>
</div>
</div>
<div class="accordion-item">
<a>Can I complete the surveys on-site at the conference?</a>
<div class="content">
<p>Yes. You may use the on-site computers available at the Connection Café to access your email and the evaluation surveys.</p>
</div>
</div>
<div class="accordion-item">
<a>What if I don't complete the surveys while I'm at the conference?</a>
<div class="content">
<p>Reminders for the individual session evaluations will be emailed over a period of three weeks to ensure that everyone has adequate opportunity to complete the evaluations and prepare the appropriate CE certificates.</p>
<p>A separate email invitation will be sent to all participants to complete the overall conference evaluation, which will be open for three weeks.</p>
</div>
</div>
<h3 style="margin-top: 2rem;" class="faqtitle">Supplier FAQs</h3>
<div class="accordion-item">
<a>When does supplier registration open?</a>
<div class="content">
<p>Supplier registration will open in early November 2019. Remember, booths are assigned based It's first-come, first-served basis, so have your accounting ready to pay in November! If you have questions, please contact the Premier Solution Center at 877.777.1552.</p>
</div>
</div>
<div class="accordion-item">
<a>What is the expected attendance?</a>
<div class="content">
<p>Breakthroughs is the year’s most anticipated meeting for healthcare executives and hospital administrators to attend. In 2019, more than 4,000 people attended Breakthroughs. For more details on who attends Breakthroughs each year, check out our Breakthroughs 2020 Prospectus.</p>
</div>
</div>
<div class="accordion-item">
<a>What are the benefits of participating?</a>
<div class="content">
<p>Breakthroughs 2020 is a single event that gets your product or service in front of healthcare industry leaders – everyone from the chief executive officer to information technologists and physicians alike. In fact, over 80 percent of attendees are final decision-makers on products and services. Breakthroughs 2020 includes six dedicated exhibit hall hours, promotional opportunities throughout the conference and numerous networking opportunities specifically designed for suppliers. For more information on exhibiting benefits, click here.</p>
</div>
</div>
<div class="accordion-item">
<a>How and when can I make hotel accommodations?</a>
<div class="content">
<p>Hotel reservations may be made at the time of exhibiting attendee registration in the early spring.</p>
</div>
</div>
<div class="accordion-item">
<a>What is the fee for registration?</a>
<div class="content">
<p>Supplier booth registration pricing includes one full conference attendee registration badge. The badge that is included in the booth fee is allocated to the first registered attendee. Additional registration badges can be purchased online:<br>
$525 (full conference pass)<br>
$275 (daily conference pass)<br>
Price after June 19:<br>
After June 19: $650 (full conference pass)<br>
After June 19: $400 (daily conference pass)</p>
</div>
</div>
<div class="accordion-item">
<a>What is included in my booth space fee?</a>
<div class="content">
<p>Each 100 square feet (10′ x 10′ booth space) includes the following:
<ul>
<li>One 8-foot back panel</li>
<li>36-inch side rails</li>
<li>One 7″ x 44″ sign for the company name</li>
<li>One 6′ skirted table</li>
<li>Two chairs</li>
<li>One wastebasket</li>
<li>Carpet is not included with your booth; you must order through GES Exposition Services.</li>
</ul></p>
</div>
</div>
<div class="accordion-item">
<a>Are there booth display guidelines?</a>
<div class="content">
<p>Click here to view guidelines for booth displays.</p>
</div>
</div>
<div class="accordion-item">
<a>When will I be notified of my booth space assignment?</a>
<div class="content">
<p>All booth assignments will be made available in early spring 2020 to the booth manager.</p>
</div>
</div>
<div class="accordion-item">
<a>When will I receive my exhibitor services and information manual?</a>
<div class="content">
<p>An exhibitor services manual (exhibitor kit) will be sent to each exhibitor by GES in early spring 2020. The kit will contain pertinent information regarding the show including, but not limited to, additional rules and regulations, display rules, move-in/move-out schedules, registration information, contractor order forms and pricing, shipping and labor, utilities and building services, decoration, and audio/visual services. <b>Pay close attention to the May discount price deadline; in many cases ordering early will save you as much as 20 percent.</b></p>
</div>
</div>
<div class="accordion-item">
<a>What are the move-in, show and move-out dates and times?</a>
<div class="content">
<p>Booth Move In/Setup:
<ul>
<li>Tuesday, June 23 | 8 a.m.-5 p.m.</li>
<li>Wednesday, June 24 | 7 - 10:30 a.m.
All exhibits must be fully installed by show start time on Wednesday, June 24.</li></ul>
<p>Showtimes:
<ul>
<li>Wednesday, June 24 | 11:45 a.m.-2:45 p.m.</li>
<li>Thursday, June 25 | 11:45 a.m.-2:45 p.m.</li></ul></p>
<p>Move Out/Booths Dismantle:
<ul>
<li>Thursday, June 25, at the closing of the show.</li>
</ul></p>
</div>
</div>
<div class="accordion-item">
<a>What opportunities are there for lead generation?</a>
<div class="content">
<p>Lead generation equipment will be available for exhibitors to rent prior to and during the conference. Full information and order forms will be available in the exhibitor services manual when it is distributed to booth managers in spring 2020.</p>
</div>
</div>
<div class="accordion-item">
<a>What information is listed for my company on the Breakthroughs 2020 mobile app?</a>
<div class="content">
<p>Exhibitors have the opportunity to upload a company logo, contact information, website URL and social media links when registering for a booth. This information will be transferred into our Breakthroughs Conference mobile app for all attendees to view. Prior to the conference, only booth managers can edit this information.</p>
</div>
</div>
</div>
</div>
<!-- partial -->
<script src='<a href="https://code.jquery.com/jquery-3.2.1.min.js'></script" target="_blank">https://code.jquery.com/jquery-3.2.1.min.js'></script</a>>
<script>
const items = document.querySelectorAll(".accordion a");
function toggleAccordion(){
this.classList.toggle('active');
this.nextElementSibling.classList.toggle('active');
}
items.forEach(item => item.addEventListener('click', toggleAccordion));</script>
</body>
</html>
1 Correct answer
4
Replies
AdChoices