Develop Reference

How to add an active class to navigation button based off of URL

I'm working with MadCap Flare, and our team currently has four websites that we are supporting. We want to be able to link these different websites together, so we've added a navigation bar that links to each separate website. The navigation bar works as intended, but we have to assign the Active tag to the correct website link in each project. We're trying to avoid these kinds solutions because manually configuring settings in each project is not our preferred way of working.
We're looking for a way to automatically detect the URL and assign an Active tag based on the URL. This doesn't seem too difficult, and I've found a lot of similar questions and solutions, but I can't seem to figure out how to do this with our current setup. Our team does not consist of coders/programmers, so we could just be missing a very easy solution.
One major challenge is the fact that the hard links, such as https://example.com/Site1/Default.htm, are default links that redirect to the site's homepage, such as https://example.com/Site1/Home.htm, so I can't even do a simple comparison between the current page and the link. Many of the solutions I've found so far seem to break down at this point.
Here's our relevant code:
HTML
<div class="my-header">
<ul class="XLink">
<li class="XLink">Site 1
</li>
<li class="XLink">Site 2
</li>
<li class="XLink">Site 3
</li>
<li class="XLink">Site 4
</li>
</ul>
</div>
CSS
ul.XLink
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
li.XLink
{
float: left;
}
li.XLink a
{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.active
{
background-color: #1c5a97;
}
/* Change the link color to #111 (black) on hover */
li.XLink a:hover
{
background-color: #111;
}
div.my-header
{
background-color: #103d78;
margin-bottom: 15px;
width: 75%;
I've tried a handful of Javascript that I've found online, but nothing has achieved what I was attempting. I've tried adding IDs to the line items, but I'm just too unfamiliar with Javascript to even know what I'm doing. Does anyone have some advice?

You could start by establishing some conventions.
All your "links" to said websites have a classname called "XLink", which I see you're already doing.
Each of these "links" has id=uniqueID of the associated website.
<div class="my-header">
<ul class="XLink">
<li class="XLink" id="Site1">Site 1
</li>
<li class="XLink" id="Site2">Site 2
</li>
<li class="XLink" id="Site3">Site 3
</li>
<li class="XLink" id="Site4">Site 4
</li>
</ul>
</div>
Next, you'd have to detect the address change via JS
function onHashChange(){
links = document.getElementsByClassName("XLink")
.forEach(link =>{
if(location.href.includes(link.id){
link.classList.add("active");
break;
}
}
}
$(document).ready(onHashChange);
window.onhashchange = onHashChange;
PS: this is just a trivial solution, assuming your website's URL dont have edgecases like https://example.com/Site1/page/Site3/Something.htm. For which you need to do a more fine grained regex match.
Definitely not the cleanest of the solutions though.

Negating Effects of a Previous Click Event on One Element When a Click Event Occurs on Another Element

I'm having a problem with some vanilla JavaScript that I need help with. I know that the title of this question may seem like a double of others, but I believe there may be a slight twist to my issue that is causing me to either be confused or follow the wrong path of thinking. Here is how I will present my problem...
FIRST - I will describe the issue plus provide a temporary link to the page in question. It is my portfolio website... I would like to start looking for a Junior level Frontend Developer position.
SECOND - I will briefly show some research and my take on how to come to a solution.
THIRD - I will provide the code for the problem I'm trying to solve.
**** ONE IMPORTANT NOTE - I firmly believe in the "teach a man to fish, rather than give him a fish" philosophy and so if you have a solution, could you please explain WHY it works or point me to reference materials so I can read up on it?
(1) DESCRIPTION OF ISSUE ----------------------------------->
On the "Project Page" of the portfolio website that I'm building for myself, I am attempting to make it so that when you click on the image of a project I have done, it displays a block of descriptive text about that project on one side of the screen.
If you were to click on another project image, the already displaying block of text would disappear and a new block of text would appear in the same position.
I have managed to come up with code that displays the text blocks once a project image is clicked, but because the previous text block doesn't disappear, the text blocks are stacking on top of each other when a new project image is clicked.
Here is a temporary link to the page in question: [http://s9m00001.site/projects.html][1]
(2) MY RESEARCH AND THOUGHTS TOWARDS A SOLUTION -------------------------->
I have done Google searches and have checked out some of the suggested stack overflow posts that appeared when I typed the title to this question that I am posting. The closest thing I could find to my situation was this: [Remove changes from one element when event occurs on another element?
I tried to apply the concept of what that rather eloquent first solution provided. I even looked up the Array map () method on W3Schools because I was not familiar with it. That article is here: https://www.w3schools.com/jsref/jsref_map.asp
In attempting to solve the problem, my line of thinking was as follows:
use querySelector to grab all of the project images by class and put them into an array.
Add a "click" event listener to the items in the array that enables "function X".
"Function X" changes the css "display" property of the appropriate text blocks from "none" to "block".
Use an if statement to see if there are any other text blocks with a "display of "block" and then to change them to a "display" of "none" if the condition was true.
(3) CODE -------------------->
I am providing the code that I'm using below. Please note that I have included one of my attempts at solving the issue in my JavaScript code, which has been commented out and labeled as "ONE OF MY SOLUTION ATTEMPTS". It was the attempt that I felt I was the closest with to solving the issue.
HTML
<!-- MAIN -->
<div id="upper-project-container">
<!-- Golden Glow Investigative & Protective Services -->
<div class="project-text-left" id="proj-des1">
<h4 class="project-tech">Golden Glow Investigative & Protective Services</h4>
<p class="white-text-two">I have built and maintained the various iterations of the website for this company since 2004, using either Adobe Dreamweaver or proprietary contact management systems. But this redesign project required a much more intimate knowledge of coding than previously needed and a finished product within only 2 days.
</p>
<p class="white-text-two">The needs of this project presented me with the opportunity to use a template and work with source code that was written by someone other than myself, which was something I had not done up until that point.
</p>
<p class="white-text-two">The template came from https://html5up.net/spectral and I modified or restructured appropriate aspects of the code to produce a finished product that fit the client’s needs.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">June, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="golden-glow">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Jay Hunt Designs -->
<div class="project-text-left" id="proj-des2">
<h4 class="project-tech">Jay Hunt Designs</h4>
<p class="white-text-two">Jasmine Hunter is a fashion designer that I met at my local Panera Bread restaurant (I have obtained 3 of my clients from hanging out there!). Miss Hunter wanted a site that had a clean and simple design, but was elegant and utilized the colors black, white, silver and gold.
</p>
<p class="white-text-two">The challenge I was faced with in order to complete this project had to do with the cross browser compatibility of the auto scrolling feature I built into the homepage of the site. I do the testing of my builds on Chrome, Safari, Firefox, Edge, and Opera. The auto scrolling feature worked on all of those browsers except for Firefox.
</p>
<p class="white-text-two">After researching the issue through Google searches I finally found a solution that took care of the issue.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">April, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="jay-hunt">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Goodie Treats -->
<div class="project-text-left" id="proj-des3">
<h4 class="project-tech">Goodie Treats</h4>
<p class="white-text-two">The focus of the Goodie Treats organization is to build the self esteem of minority children, girls in particular, through various activities and events. The request of the client was that I made the entire homepage function as the initial menu for the site and also that it featured images from some of their events, but they wanted the rest of the site to be a simple design that featured big background images.
</p>
<p class="white-text-two">The challenging homepage request from the client provided me with an opportunity to explore using a responsive grid system to build the home page. Building the site’s homepage to spec allowed me to grasp the basic concepts and usefulness of using a grid, as well as experiment with its responsiveness to various screen sizes.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">March, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="goodie-treats">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Rapture Guns -->
<div class="project-text-left" id="proj-des4">
<h4 class="project-tech">Rapture Guns & Knives</h4>
<p class="white-text-two">During a visit to a local gun store for some target ammo, I overheard the store owner that he was in need of a website but didn’t have the knowledge on how to do it. I took that opportunity to introduce myself and shortly afterwards he became my client.
</p>
<p class="white-text-two">Because the majority of his customers were over the age of 50, the client wanted a very simple site that would appeal to the “nothing fancy” character of his customer base and that was modelled after the website for Gunsmoke Guns (now closed) out of Wheat Ridge, Colorado.
</p>
<p class="white-text-two">The challenge that I had in building this website had to do more with content than it did with any technical obstacles. I had to compose all of the copy for the website based on a recorded interview I conducted with the owner.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">January, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="goodie-treats">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Brackets (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
</div>
<div class="project-text-right" id="proj-des1">
</div>
<div id="lower-project-container">
<h3 id="project-heading">projects</h3>
<div class="project-col" id="project01">
<img src="images/project1.jpg" class="project-" id="des1" alt="golden-glow-security-website">
</div>
<div class="project-col" id="project02">
<img src="images/project2.jpg" class="project-" id="des2" alt="jay-hunt-designs-website">
</div>
<div class="project-col" id="project03">
<img src="images/project3.jpg" class="project-" id="des3" alt="goodie-treats-website">
</div>
<div class="project-col" id="project04">
<img src="images/project4.jpg" class="project-" id="des4" alt="rapture-guns-website">
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>
CSS
/* ========== PROJECTS PAGE ========== */
.wrapper#projects {
background: url(../images/bg02.jpg)fixed no-repeat center;
background-size: cover;
overflow: hidden;
}
#upper-project-container {
width: 100%;
height: 58%;
}
ul.tech-list {
margin-left: 40px;
}
ul.tech-list li {
list-style-type: disc;
font-family: 'Open Sans', sans-serif;
font-size: .8rem;
line-height: .95rem;
color: #ffffff;
}
.project-text-left {
position: absolute;
top: 10%;
left: 4%;
width: 720px;
height: 400px;
}
.project-text-left#proj-des1 {
display: none;
}
.project-text-left#proj-des2 {
display: none;
}
.project-text-left#proj-des3 {
display: none;
}
.project-text-left#proj-des4 {
display: none;
}
.project-text-right {
position: absolute;
top: 10%;
right: 4%;
width: 720px;
height: 400px;
display: none;
}
.show {
display: block;
}
#lower-project-container{
width: 100%;
height: 45%;
}
.project-col {
width: 25%;
margin-top: 20px;
text-align: center;
float: left;
-webkit-transition: transform .4s;
-moz-transition: transform .4s;
-o-transition: transform .4s;
transition: transform .4s;
}
.project-col:hover {
transform: scale(1.1);
-webkit-transition: transform .4s;
-moz-transition: transform .4s;
-o-transition: transform .4s;
transition: transform .4s;
}
img {
max-width: 100%;
box-shadow: 24px 17px 44px rgba(0, 0, 0, .7);
cursor: pointer;
}
JAVASCRIPT
// ----- PROJECT PAGE
Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
/*var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
project.style.display = 'block';
});
});
// ========== ONE OF MY SOLUTION ATTEMPTS ========
/* window.onload = function() {
var showProject = document.querySelectorAll('#lower-project-container .project-');
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
// If another project panel is visible, it is then hidden.
[].map.call(document.querySelectorAll('.project-text-left'), function(e) {
e.classList.remove('show'); // remove from all
});
this.classList.add('show'); // add on current
});
});
} */
(4) CONCLUSION -------------------->
Thank you for whatever help you can provide me and please let me know if there are any questions I can answer or additional code that you may need to look at to better see any relationships.

The first problem is that in main.js you have an incomplete comment block
// ----- PROJECT PAGE
Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
Add a /* before the word Project
// ----- PROJECT PAGE
/* Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
[EDIT]
You could add another variable to track if something is already displayed
var oldID = null;
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
if( oldID != null ) {
document.getELementByID('proj-"+oldID).style.display = "none";
}
project.style.display = 'block';
//--- save current id
oldID - e.target.id;
});
});

This problem was answered by Jeff in the comments. I am only posting this answer to share the final code that actually worked. Essentially, Jeff's answer was correct. However, there were a couple of minor typos and a "getElementById is not a function" error message I was getting on Chrome Developer Tools. The final code that works is below. All credit goes to Jeff for it. Please note the VERY minor changes I made between what Jeff offered and the final working version. I hope this helps someone with a similar issue in the future! Here's the final working code:
// ----- PROJECT PAGE
/*Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');
var oldID = null;
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
if( oldID != null ) {
document.querySelector('#proj-'+ oldID).style.display = "none";
}
project.style.display = 'block';
//--- save current id
oldID = e.target.id;
});
});

How to create slider with titles instead of arrows

I have created a row of four headings across the page with descriptions for each below. I would like it beginning with the first title highlighted and the first description only. When each title is clicked, the description changes (slides) to match). Basically a slider but instead of arrows – titles. What is the best/easiest way to achieve this? Thanks.
.facilities {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 30px 0;
max-height: 40px;
}
.facilities .heading {
flex: 0 0 25%;
}
ul.facility-descriptions {
font-family: 'Montserrat',"Helvetica-Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 30px;
padding: 0;
margin: 0;
}
ul.facility-descriptions li {
list-style: none;
}
<div class="facilities">
<div class="heading"><p>FACILITIES MANAGEMENT</p></div>
<div class="heading"><p>CATERING SERVICES</p></div>
<div class="heading"><p>CLEANING SERVICES</p></div>
<div class="heading"><p>CAMP RELOCATIONS</p></div>
</div>
<ul class="facility-descriptions">
<li>We are responsible for the effective management of on-site accommodation on behalf of our clients. Our specialist staff in camp management and catering have a wealth of experience and proven record of accomplishment in this industry. Our services are supported with safe documented systems of work and are environmentally sustainable.</li>
<li>Our menus aim to provide a wide choice for clients and residents whilst providing the necessary nutritional balance to support an individual's daily requirements. When compiling our menus, we consult widely and create recipes that take into consideration dietary guidelines to promote healthy living.</li>
<li>We address all cleaning requirements on-site including detailed cleaning of specialised areas. We ensure that all camp quarters, rooms, and ablutions are maintained to an optimum hygienic condition. Services include daily cleaning, bed making, washing of guest's apparels, bed linen changed weekly and on departure of guests or when specifically requested, and twice daily cleaning of ablutions.</li>
<li>The synergies associated with our transport and logistics activities enable us to bring added value to our clients when it comes to mobilisation, relocation or demobilisation of remote camp facilities. We operate a fleet of prime movers, winch trucks, specialised trailers, forklifts and all terrain mobile cranes complemented by a professional team of multi-skilled, experienced operators. This allows us to relocate camps in geographically diverse fields across a variety of remote locations.</li>
</ul>

An easy way would be JavaScript (Get started here: http://www.w3schools.com/js). I've added jQuery, as it make life with JS much easier.
If your solution is index-based (first header shows first description), this could be a simple solution:
var headerList = $(".heading");
var descList = $(".facility-descriptions li");
var index = 0;
headerList.click(function(){
$(descList[index]).hide();
index = headerList.index($(this));
$(descList[index]).show();
});
.facilities {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 30px 0;
max-height: 40px;
}
.facilities .heading {
flex: 0 0 25%;
cursor: pointer;
}
ul.facility-descriptions {
font-family: 'Montserrat',"Helvetica-Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 300;
line-height: 30px;
padding: 0;
margin: 0;
}
ul.facility-descriptions li {
list-style: none;
display: none;
}
ul.facility-descriptions li:first-child {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="facilities">
<div class="heading"><p>FACILITIES MANAGEMENT</p></div>
<div class="heading"><p>CATERING SERVICES</p></div>
<div class="heading"><p>CLEANING SERVICES</p></div>
<div class="heading"><p>CAMP RELOCATIONS</p></div>
</div>
<ul class="facility-descriptions">
<li>We are responsible for the effective management of on-site accommodation on behalf of our clients. Our specialist staff in camp management and catering have a wealth of experience and proven record of accomplishment in this industry. Our services are supported with safe documented systems of work and are environmentally sustainable.</li>
<li>Our menus aim to provide a wide choice for clients and residents whilst providing the necessary nutritional balance to support an individual's daily requirements. When compiling our menus, we consult widely and create recipes that take into consideration dietary guidelines to promote healthy living.</li>
<li>We address all cleaning requirements on-site including detailed cleaning of specialised areas. We ensure that all camp quarters, rooms, and ablutions are maintained to an optimum hygienic condition. Services include daily cleaning, bed making, washing of guest's apparels, bed linen changed weekly and on departure of guests or when specifically requested, and twice daily cleaning of ablutions.</li>
<li>The synergies associated with our transport and logistics activities enable us to bring added value to our clients when it comes to mobilisation, relocation or demobilisation of remote camp facilities. We operate a fleet of prime movers, winch trucks, specialised trailers, forklifts and all terrain mobile cranes complemented by a professional team of multi-skilled, experienced operators. This allows us to relocate camps in geographically diverse fields across a variety of remote locations.</li>
</ul>
Please note that there are millions of solutions on the internet, consider using one of them. I think what you are looking for are tabs:
http://www.w3schools.com/howto/howto_js_tabs.asp
http://callmenick.com/post/simple-responsive-tabs-javascript-css
https://jqueryui.com/tabs/

Dynamic max height as a calculation based on the heights of various flexbox items?

I have a list of flex-items. They're divs with some text and a link or two-- they may end up holding some images inside them eventually. These are small descriptions of portfolio items, which I imagine I'll add to as time goes on.
I'd like the total height of my flex container to be calculated as a bit more than half of the totals of all the flex-items. I'd like to manage this with CSS and javascript, but I'm really not sure that's possible.
I know that the standard max-height properties aren't going to do what I want, but I'm not sure there isn't a way to get the CSS flex containers and times to behave with some other property or attribute that I don't understand just yet.
I looked through a number of other posts on dynamic div height-- but didn't manage to understand what I was looking at.
The page in question can be found here:
http://westerneditor.com/index.php/sandbox-2/
relevant CSS so far:
.flex-container {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
align-content: top;
max-height:1100px;
}
.flex-item {
display: inline-block;
background: #292920;
align-self:baseline;
border: 2px solid orange;
border-radius: 5px;
padding: 5px;
width: 190px;
min-height: 100px;
max-height: 500px;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
line-height: 21px;
color: white;
font-size: 1em;
text-align: left;
}
Relevant HTML:
<div class="flex-container">
<div class="flex-item">
When working for the Writing Center at UVU, I reworked and edited our Chicago/Turabian guide for clarity.
<br>
Chicago/Turabian Guide
</div>
<div class="flex-item">
I wrote a guide on writing to your government officials as well.
<br>
Writing Your Government Official
</div>
<div class="flex-item">I also wrote a piece on the Housing First program, designed to reduce homelessness in Utah, particularly in Salt Lake County.
Utah’s Housing First program successful with large decrease in Utah’s chronic homeless
</div>
<div class="flex-item">And a piece that I collaborated on with Drew Clark, about the possible danger glyphosates and their use in the GMO farming industry.
<br>
GMOs not harmful to human health, but further research into farming practices necessary
</div>
<div class="flex-item">
While at the Deseret News, I was a major player in soliciting opinion pieces, editing them and arranging them for a couple of larger multi-perspective works.
One of these on the BRT route in Provo, UT.
We must consider alternatives on Provo’s BRT routes
<br>
Route 4 is the best option to bring BRT to Provo before funding fades
</div>
<div class="flex-item">
Another multi-perspective work was on Recapture Canyon, in southern Utah, the BLM, and general frustrations over who should control federal lands and how federal offices should treat locally popular destinations.
<br>
Public interest in public lands
<br>
The BLM hasn’t kept its own rules
<br>
Preserving our shared public lands
<br>
The deficit of trust between America and out government
</div>

Jquery get your classes/divs/id's height(), width() and do what you want.
$(document).ready(function(){
var total-height = $(".flex-container").height();
var total-width = $(".flex-container").width();
;})
Edit
JavaScript
Height of the entire element, including borders.
document.getElementById('.flex-container').offsetHeight
Height excluding border and scrollbar, but including padding.
document.getElementById('.flex-container').clientHeight

Make arrow point downward when accordion is active

I'm using Zebra Accordion. Not the best one out there but it's 100% compatible with jQuery 1.5.2, which is outdated, obviously.
Anyway, I want the arrow to point downward when the user click on the accordion, very much like this:
http://jqueryui.com/accordion/
This is currently my page right now, if you go to Alchemy in Detail tab you'll find the two Accordions there:
http://www.planet.nu/dev/test-2/product-page.html
This is the CSS for the Zebra Accordion:
dl.Zebra_Accordion { width: 740px; font-size: 14px; }
dl.Zebra_Accordion dt { background: #878787; color: #FFF; font-weight: bold; padding: 8px; }
dl.Zebra_Accordion dt:hover { background: #0095da; }
dl.Zebra_Accordion dd { background: #EFEFEF; padding-top: 5px; padding-bottom: 305px; margin: 0; }
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #0095da; }
This is the HTML:
<dl class="Zebra_Accordion">
<dt><p class="accordion-header">Managed Services</p></dt>
<dd>
<p><span>Alchemy Social’s Managed Service solution works with businesses of all sizes — from brand new start-ups to established multinationals — ensuring that they connect with and engage the right social audiences.</span></p>
<p>Our teams combine the perfect blend of skills, from traditional digital display through search to creative design. With offices around the world, we manage campaigns and support our clients whenever and wherever they need us:</p>
<ul>
<li class="alchemy-product-list">Full campaign management, from goal setting/strategy through to delivery and reporting</li>
<li class="alchemy-product-list">Targeting and segmentation planning</li>
<li class="alchemy-product-list">Custom built creative generation on demand (image and copy)</li>
<li class="alchemy-product-list">Daily optimisation</li>
<li class="alchemy-product-list">Regular reporting</li>
<li class="alchemy-product-list">Campaign review</li>
<li class="alchemy-product-list">Access to Experian’s unique and proprietary data assets to improve campaigns</li>
</ul>
</dd>
<dt>Licensed Services<img src="img/arrow-white.png" class="white-arrow"></dt>
<dd>
<p><span>As the social space evolves at tremendous speed, even the most experienced in-house teams can need support to stay ahead of the curve.</span></p>
<p>Experian’s Alchemy Social Licensed solutions offer flexible, on-demand services to meet every need. Our client services team is amongst the most experienced in the industry, offering scalable support to your social strategies and campaigns.</p>
<p><span>Alchemy SaaS</span></p>
<p>Licensing the Alchemy Social Platform brings access to the full range of features of the Facebook ads manager platform, including:</p>
<ul>
<li class="alchemy-product-list">Guidance on how to create, manage, report on and optimise campaigns</li>
<li class="alchemy-product-list">Access to regular webinars on new releases, features and best practices</li>
<li class="alchemy-product-list">Dedicated account management support and consultative advice</li>
<li class="alchemy-product-list">Create campaign rules for real-time cost per acquisition (CPA) optimisation</li>
<li class="alchemy-product-list">Effectively refine activity at various points of the campaign cycle</li>
<li class="alchemy-product-list">Control ad spend at segment level by location or target group</li>
<li class="alchemy-product-list">Analyse conversion data and integrate with other analytical tools</li>
<li class="alchemy-product-list">View real-time reporting to understand CPA and conversion rates at ad level</li>
<li class="alchemy-product-list">Integrate campaign results with tools like Google Analytics and Adobe Omniture</li>
</ul>
</dd>
</dl>
I'll also include a bit of the main CSS code as well, this is from alchemy-product-style.css:
.accordion-header:after{
content: url(../img/arrow-white.png);
padding-left: 10px;
}
dl.Zebra_Accordion dt .accordion-header{
color: #FFF !important;
padding: 0 !important;
}

Maybe if you add a rule like:
.Zebra_Accordion_Expanded .white-arrow {
transform: rotate(90deg); // You should prefix this accordingly to your needs.
}
Support for CSS3 transforms is pretty good at the moment, but if you need support older browsers, I would do it just like in jQueryUI accordions. They have a <span> for the arrow-icon, and when then the background of the icon is changed according to it's state.
It would look something like this:
HTML:
<dt class="Zebra_Accordion_Expanded">
Licensed Services
<span class="arrow-icon"></span>
</dt>
CSS:
.arrow-icon {
display: inline-block;
width: 12px;
height: 12px;
background: url(../img/arrow-white.png) center no-repeat;
}
.Zebra_Accordion_Expanded .arrow icon {
background-image: url(../img/arrow-white-down.png);
}
This should work, but it's just an example. Keep in mind that using 2 images would create an extra http request, and using CSS Sprites would be a more elegant solution in this case.
Hope it helped you.
— FF

Ok - here's a fiddle to demonstrate my approach:
http://jsfiddle.net/afpgpngo/
Change your css to respond to the Zebra_AccordionExpanded style that gets set by Zebra ...
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded .accordion-header:after{
content: "put link to downward facing arrow";
padding-left: 10px;
}
dl.Zebra_Accordion dt .accordion-header:after{
content: url(http://www.planet.nu/dev/test-2/img/arrow-white.png);
padding-left: 10px;
}
And also make sure you change your html to be consistent:
<dt><p class="accordion-header">Managed Services</p></dt>
and
<dt><p class="accordion-header">Licensed Services</p></dt>
(the css inserts after the accordion-header class)