CSS issue with a Tag and the ARIA role=button feature doesn't work like I want it
This is my page using the ARIA CSS role=button feature. It is applied to the A tag inside a DIV. I also have regular A tag elements in the DIV that are getting this ARIA feature inherited and I don't want it to affect my regular hyperlinks.
This is the code
The live page is http://www.wildernessclubm
If you click the READ MORE link on a desktop and mobile, it does what it's suppose to. But it also attaches the content: -collapse to any link. Especially on mobile, which automatically creates a phone number link.
I want all NON hyperlinks to work as normal.
I tried to replace the a tag using <span> and <button> and <div> and it either aesthitically didn't work or wouldn't work on a mobile device.
HOW DO I GET MY NORMAL HYPERLINKS TO NOT INHERIT THE CSS ATTRIBUTE I ONLY WANT ON THE BOTTOM LINK "READ MORE" or "COLLAPSE"?
This is the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wilderness Club Member Newsletter</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body {
padding-bottom: 25px;
background-image: url(newsimg/background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
font-size:x-large;
}
h4 {
padding-left: 5%;
}
.module .collapse, .module .collapsing {
height: 4.75rem; /* [NUM_OF_LINES] x [LINE_HEIGHT] */
line-height: 1.0;
padding-left: 5%;
padding-right: 5%;
text-align: justify;
text-justify: inter-word;
}
.module .collapse {
position: relative; /* For ...'s content absolute positioning */
display: block;
overflow: hidden;
}
.module .collapse:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
}
.module .collapse.show {
height: auto; /* You need to reset the height when not collapsed */
}
.module .collapse.show:before {
display: none; /* Of course you don't want to display ... */
}
.module a.collapsed:after {
content: '+ READ MORE';
color: #423200;
font-size:small;
height: 15px;
font-weight:bolder;
margin-left: 5%;
cursor: pointer;
}
.module a:not(.collapsed):after {
content: '- COLLAPSE';
font-size:small;
height: 15px;
font-weight:bolder;
margin-left: 5%;
cursor: pointer;
}
.normlink {
color:#BB7100;
text-decoration: underline;
}
.ncon {
max-width: 60%;
margin-left:auto;
margin-right:auto;
border-bottom: 1px black solid;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div style="text-align:center; width:96%; margin-left: auto; margin-right: auto; margin-top:0;"><img src="newsimg/newsletterheader.jpg" alt="Wilderness Club Resort - Newsletter" style="width:100%; height:auto;"/><br /><h1><u>APRIL 2019</u></h1></div>
<div class="container ncon">
<div class="module">
<h3><img src="newsimg/hospitality.png" alt="Wilderness Club Resort Hospitality" width="100" height="100" hspace="10" vspace="10" border="0" align="middle" />HOSPITALITY</h3>
<h4>NEW MANAGER - NEW WATER PARK DAILY RATES</h4>
<p class="collapse" id="hospitality" aria-expanded="false">
We proudly announce the addition of our Resort and Member Services Manager, Tara Roth! She brings to the resort 15 years of experience in public relations, marketing, media relations and communications, both at the national and local levels. She launched her career working at The University of Alabama, my alma mater, and corporate giants Southern Progress Corporation, home of Southern Living, Coastal Living, Cooking Light and Sunset magazines, and Lands' End before relocating to Montana where she led public, media and government relations and marketing outreach at Flathead Valley Community College for 12 years. In 2017 she began directing life enrichment programming at senior living facilities in Bigfork and Whitefish. A bonus bit of experience with Tara is that she brings years of experience in property management and food and beverage operations. Working at Wilderness Club Resort is a great fit for both parties, and her contagious positive personality will be a big part of providing excellent customer service! Should you need any assistance as a member, Tara is your point of contact.
<br /><br />
In an effort to provide better service to our homeowners and members, we are streamlining security to ensure our homeowners, members and guests have the best experience our resort has to offer. As you prepare to welcome guests, we ask that you please contact the welcome center at least 48 hours in advance to make arrangements with security to provide your guests access. Guests who are coming to enjoy the resort amenities will be charged a <em>daily resort fee</em> of $15 per adult and $10 per child, or $32 for a family of four. This will ensure the names of your guests will be given to our pool attendant, allowing them to receive towels while enjoying the water park. This also provides access to our Wilderness Lake, Sports Park, and brand new indoor exercise studio by the golf cottages. Your guests also can enjoy a special member-guest rate at our world-class golf course. Please give us a call to book your tee times as well as make reservations for one of our luxurious spa treatments or an adventurous horseback ride! One last exciting detail, we will be offering special member-only time at our water park. We will have those hours posted once our pools open around May 15.
<br><br />Our office hours vary but we will gladly receive your call at 406.889.6501 and will assist you in any way possible.<br />
<br />
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#hospitality" aria-expanded="false" aria-controls="hospitality"></a>
</div>
</div>
<div class="container ncon">
<div class="module">
<h3><img src="newsimg/realestate.png" alt="Wilderness Club Resort Real Estate" width="100" height="100" hspace="10" vspace="10" border="0" align="middle" />REAL ESTATE</h3>
<h4>NEW COTTAGE MODELS - REAL ESTATE TOURS - RENTAL PROGRAM</h4>
<p class="collapse" id="construction" aria-expanded="false">
Our Real Estate Director, Jerry Murphy, enters his fourth year with Wilderness Club Resort in 2019. His energetic and congenial personality leads many members and potential home owners to learn about the value in investing in a new second or estate home here. As before, Jerry will be leading all real estate tours this year. <br />
<br />
Many of you may be familiar with our new micro-cottages called the Juniper, Cottonwood, and White Pine. Each model is available with an optional loft and depending on lot, an optional walk-out basement. Please arrange a tour of these new cottages next time you're in the resort.<br />
<br />
For those not yet familiar with the Wilderness Rental Program, an equal split of rental revenues between our property owners and Wilderness Club Resort, Jerry can bring you fully up to speed how it works and why it could possibly be a good opportunity for both parties. Be sure to contact Jerry directly by phone or text at 406.300.2669
<a href="mailto:jerry@thewildernessclub.com" target="_blank" class="normlink">jerry@thewildernessclub.com</a>.<br />
<br />
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#construction"
aria-expanded="false" aria-controls="construction"></a>
</div>
</div>
<div class="container ncon">
<div class="module">
<h3><img src="newsimg/golf.png" alt="Wilderness Club Resort Golf" width="100" height="100" hspace="10" vspace="10" border="0" align="middle" />GOLF</h3>
<h4>NEW CHECK-IN POLICY - NEW COURSE RULES - NEW ASSISTANT HEAD PRO</h4>
<p class="collapse" id="golf" aria-expanded="false">
Hello everyone! It's been a long, cold winter and I'm sure you're all ready to get back to a great season of golf at The Wilderness Club.
Starting this season, we are asking all members to provide us with the names and emails of any guests you are bringing. This can be done over the phone when you make your reservation or at the time of check-in.<br /><br />
Online booking is available as before. You may have to enter a credit card in in order to register but your card is not charged prior to checking in. You may use the card on file to pay for your guests and purchases in the golf shop if you wish.<br /><br />
There are some significant changes to the Rules of Golf this year. Feel free to ask me for clarification on questions you may have. We will be incorporating the Local Rule pertaining to a lost ball. Now, you determine where your ball went out of bounds. (A) Next, find the edge of the fairway nearest to that point. (B) Then, under penalty of one stroke you may drop the ball within two club lengths of that spot in the fairway, (C) or at any point behind that spot in an area defined by an imaginary line running from the hole through the edge of the fairway nearest to where the ball went out of bounds, (B) and another imaginary line from the hole through point (C). Most often players will chose to drop at point (C). This simple solution will help save time.<br /><br />
We have a new Assistant Golf Professional this year. His name is Rick Hutchins. He comes from Priest Lake, Idaho. "Hutch" will be heading up many of our junior events, games, clinics and golf activities for our resort guests. He and I will both be available for private golf instruction as well.<br /><br />
Be sure to check out our apparel and accessories in the golf shop. Our brands include Nike®, Adidas®, Sunice®, Foot-Joy®, Bobby Jones®, Linksoul® and Straight Down®. We also have added a fun but classy lifestyle line from a company called Johnnie-O. Don't forget that we can also special order clubs, clothing or accessories that we may not carry in the golf shop.<br />
<br />
With Hutch here, I hope to play more golf with all of you than I have been able to in the past. Welcome back everyone and we'll see you out on the course!<br /><br />
Anthony Sable, PGA
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#golf"
aria-expanded="false" aria-controls="golf"></a>
</div>
</div>
<div class="container ncon">
<div class="module">
<h3><img src="newsimg/corporate.png" alt="Wilderness Club Resort Operations" width="100" height="100" hspace="10" vspace="10" border="0" align="middle" />OPERATIONS</h3>
<h4>BUSINESS DEVELOPMENT DIRECTOR - HOUSEKEEPING - WEDDINGS</h4>
<p class="collapse" id="operations" aria-expanded="false">We are pleased to announce the addition of a Business Development Director, Patrick Hess. He heralds from Indiana and has over 30 years sales and marketing, and corporate middle and senior management experience. He has conducted business in 27 countries and developed more than 40 consumer products. His previous 20 years before joining Wilderness Club Resort were spent as an owner of a marketing consulting firm and ad agency. He worked with such famous brands as Rubik's Cube, General Motors, Ford Motor Company, Bed, Bath & Beyond, and many regionally based smaller companies. He is highly skilled in marketing with an emphasis on social media and other digital platforms. His role not only heads all Marketing efforts, but also involves helping Wilderness Club Resort focus on quality of experience for our guests and members. Working with each department head, he will be refining processes and systems to ensure we are efficient, cost-effective, and providing the best possible experience for our customers. A fun fact is that his only child, Spencer, is a successful music artist based in Nashville, Tennessee. You can check out his music looking up SPENCER KANE on Apple Music or Spotify and his band ANTHEM LIGHTS.<br /><br />
Our housekeeping department (or HKP short lets say) is planning to hire 7 new employees from
China through our J1 contact this season. Please feel free to engage them as they practice their English, learn our culture, work, and
explore this beautiful state as their primary goals here. Missy, Jamie, and Patsy will be back this year as well as a couple of
new faces yet to be hired by our Director of Housekeeping, Mari Giossi. This will be her eighth season with the Wilderness Club Resort.<br />
<br />
In other exciting news….the HKP will be getting a new Home!! The plans are to build a 20x30 building to the left of the back of the clubhouse.
It will house more washers & dryers and provide much needed space. <br />
<br />
One last thing is to request that any pool towels accidentally left in cabins or homes please be returned asap.<br />
<br />
As you may have seen in our newsletter email, we are proud to launch our 2019 and 2020 Fantasy Wedding Packages. Please take a look at the brochure and share it with your friends and family who may be planning an upcoming wedding. <a href="http://www.wildernessclubmontana.com/weddings" target="_blank" class="normlink">VIEW HERE</a><br /><br />
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#operations"
aria-expanded="false" aria-controls="operations"></a>
</div>
</div>
<div class="container ncon">
<div class="module">
<h3><img src="newsimg/spa.png" alt="Wilderness Club Resort Spa Wellness" width="100" height="100" hspace="10" vspace="10" border="0" align="middle" />SPA / WELLNESS</h3>
<h4>NEW SERVICES INCLUDING WAXES, FACIALS, MANI-PEDI</h4>
<p class="collapse" id="spa" aria-expanded="false">
This past season we experienced a great response to our spa services. Well 2019 will be even better. We're expanding the service offerings to include many more amenities because we listened to our guests and members. We're increasing our staff and introducing a regular Yoga program each week as well. All Spa services can be booked directly through Hospitality at 406.889.6501.<br />
<br />
We will also be having exclusive Spa events and packages throughout the season, so keep an eye out for an email to advise you details.<br />
<br />
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#spa"
aria-expanded="false" aria-controls="spa"></a>
</div>
</div>
<div class="container ncon">
<div class="module">
<h3><img src="newsimg/f&b.png" alt="Wilderness Club Resort Food and Beverage" width="100" height="100" hspace="10" vspace="10" border="0" align="middle" />FOOD & BEVERAGE</h3>
<h4>NEW HEAD CHEF - NEW MENU - DELIVERY SERVICE - FRESH MADE PIZZA</h4>
<p class="collapse" id="food" aria-expanded="false">
Our F&B department is extremely excited about this upcoming summer season . Frank Stevelinck is the new F&B Director and Executive Chef, and comes from many years as a Resort Director at Crystal Mountain, Washington and prior at St. Mary Lodge in Glacier National Park. He brings with him as his Sous Chef, Ryan Lynch, who has been with Frank as a head Chef at Crystal Mountain, and as a chef at a fishing resort in Alaska. Also joining the team this year, we are happy to host many Culinary interns from the Philippines. They bring a lot of excitement and great personality to the F&B department.<br />
<br />
We are excited about our new menu and services this season. In addition to a fresh new menu in our Grille, we also bring an expansive new catering menu to the resort. Members and guests can order room service, pizza delivery, or have a catered lunch or dinner brought to you and served by our Chef and wonderful International Culinary interns.<br />
<br />
We will be opening Friday, April 5th, for breakfast, and limited lunch and dinner. Our menu will be a smaller version of our complete summer menu for the first few weeks of opening. Our hours will be 7 days a week 8am to 11am for breakfast, 11am to 5pm lunch, and 5pm to 8pm for dinner for the first few weeks.
<br />
<br />
For the beginning of our season, we will be running our beer cart and snack shack on limited hours depending on weather and golfers on course.
<br />
<br />
Starting April 26th, we will go to our full menus at the grille. Our summer hours will be 7am to 11am breakfast, 11am to 5pm lunch, and 5pm to 9pm dinner service. We also will open our Snack Shack at the pool and lake area, and beer cart 7 days a week starting April 26th. Our beer cart will run 9am to 5pm daily and our pool and lake area Snack Shack will be operating from 9am to 9pm daily with extended hours to help serve not only our golfers on course, but also our pool guests with full service menu and drinks.<br />
<br />
Please call 406.889.6501 to make any reservations for dinner or to book any catering events for your group. We would request you call for dinner reservations to help accommodate our staffing and expedite your seating and service. We look forward to seeing you here this summer.<br />
<br />
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#food"
aria-expanded="false" aria-controls="food"></a>
</div>
</div>
<div class="container ncon">
<div class="module">
<h3><img src="newsimg/horse.png" alt="Wilderness Club Resort Horse Program" width="100" height="100" hspace="10" vspace="10" border="0" align="middle" />HORSE PARK</h3>
<h4>NEW HORSES - NEW SERVICES</h4>
<p class="collapse" id="horse" aria-expanded="false">
The Horse Park at Wilderness Club Resort is one of the highlights for our members and guests when they visit. This year there are more options than before. The pricing has changed to simplify and be in line with our overall resort philosophy of providing your member discount off published prices instead of tiered pricing like last year. Now you simply take the published rate minus your member discount percentage and that is the price. We will be updating our overall pricing on the Resort website as soon as possible.<br />
<br />
New to the list of activities this year will be two types of carriage rides (long and short times) to provide different members and guests a variety of outing lengths and scenery. We will be continuing to offer sleigh rides in the winter months. Christy will continue to offer private lessons for adults and youth. Of course there is still the FREE opportunity to observe or participate in lodging the horses for the evening each night at 6pm as well as assisting in feeding them then and in the morning.<br />
<br />
To book your riding or carriage experience, call the resort at 406.889.6501<br />
<br />
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#horse"
aria-expanded="false" aria-controls="horse"></a>
</div>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "aq9Laaew"
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
</body>
</html>The live page is http://www.wildernessclubm
If you click the READ MORE link on a desktop and mobile, it does what it's suppose to. But it also attaches the content: -collapse to any link. Especially on mobile, which automatically creates a phone number link.
I want all NON hyperlinks to work as normal.
I tried to replace the a tag using <span> and <button> and <div> and it either aesthitically didn't work or wouldn't work on a mobile device.
HOW DO I GET MY NORMAL HYPERLINKS TO NOT INHERIT THE CSS ATTRIBUTE I ONLY WANT ON THE BOTTOM LINK "READ MORE" or "COLLAPSE"?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
IE 11 - the sooner it is gone the better.
ASKER
Great solution btw. :)