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/
Related
I need to export the content of html to word file along with headers and footers and also images.I have used the googoose.js code it works but this is not exporting images,which are base64 images and exporting normal images
<html>
<head>
<title> Word document </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.googoose.js"></script>
<style>
#googoose-footer {
margin-right: 1in;
position: absolute;
width: 100%;
text-align: right;
}
#googoose-header {
width: 100%;
text-align: center;
}
</style>
<style>
#btnExport
{
width: 60%;
height: 30px;
background: #5090a9;
border: none;
color: white;
box-shadow: 0px 2px 2px 2px #ddd;
border-radius: 5px;
cursor:pointer;
}
#btnDiv
{
float: right;
width: 10%;
*border: 1px solid black;
padding: 15px;
}
#cnt-dv
{
padding:15px;
text-align:justify;
}
#hello-canvas
{
display:none;
}
</style>
</head>
<body>
<div align="right" id="btnDiv">
<input type="button" name="btnExport" id="btnExport" value="getDoc">
</div>
<br>
<br>
<br>
<br>
<div class='googoose-wrapper'>
<div class='googoose header'>
-----Header-----
</div>
<br>
<br>
its often a challenge to identify the right set of tools and technologies to execute a project of business interest as the factors influencing the decision are multiple and complex. STSI specializes in analyzing the client’s business use case, scenario, environment, target audience and budget to propose the right blend of technologies, tools, infrastructure and resources that may be required to address the client needs. We are committed to Empower Our Clients From Ideas to Applications with a methodical approach.
Softthink Solutions (STSI) is an emerging, innovative IT services partner who provides end-to-end project solutions and premium class services in Business Intelligence, Artificial Intelligence, Data Integration, Cybersecurity, Cloud Services and Application Development.
Located just outside Washington D.C., Softthink is uniquely positioned with a highly skilled team of professionals who come equipped with a wide array of skillsets to address your technical needs.
Regardless of the size of your business or the scope of your project, our technical team will work with you to create a solution that makes good business sense and return on investment. We offer a broad spectrum of proactive IT solutions which can be customised for your needs, and with our flexible solutions and Agile Development sensibilities, we will deliver the right end result, on time. We partner with our clients to identify, design and automate repeatable processes and workflows, offering accuracy and seamless operation, and we can respond quickly with service and solutions when unexpected crises occur, helping avert incidents that would otherwise disrupt your business workflow.
Service-oriented, world class service providers
Broad skillset and expertise backed by experience to address your expectations
Ability to customize solutions and applications tailored to your specific needs
Focus on continuous improvement of our resources, skills and processes.
<br>
<img src="123.png">
Located just outside Washington D.C., Softthink is uniquely positioned with a highly skilled team of professionals who come equipped with a wide array of skillsets to address your technical needs.
Regardless of the size of your business or the scope of your project, our technical team will work with you to create a solution that makes good business sense and return on investment. We offer a broad spectrum of proactive IT solutions which can be customised for your needs, and with our flexible solutions and Agile Development sensibilities, we will deliver the right end result, on time. We partner with our clients to identify, design and automate repeatable processes and workflows, offering accuracy and seamless operation, and we can respond quickly with service and solutions when unexpected crises occur, helping avert incidents that would otherwise disrupt your business workflow.
Service-oriented, world class service providers
Broad skillset and expertise backed by experience to address your expectations
Ability to customize solutions and applications tailored to your specific needs
Focus on continuous improvement of our resources, skills and processes.
<br>
<br>
<canvas id='hello-canvas'></canvas>
<div class='googoose footer'>
-------Copy-Rights-Reserved#2018-------
Page <span class='googoose currentpage'></span>
of <span class='googoose totalpage'></span>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$("#btnExport").click(function(e) {
var canvas = document.getElementById("hello-canvas");
var ctx = canvas.getContext("2d");
function r(ctx, x, y, w, h, c) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.strokeStyle = c;
ctx.stroke();
}
r(ctx, 0, 0, 32, 32, "black");
r(ctx, 4, 4, 16, 16, "red");
r(ctx, 8, 8, 16, 16, "green");
r(ctx, 12, 12, 16, 16, "blue");
var o = {
download: 0,
filename: 'test.doc'
};
$(document).googoose(o);
});
});
</script>
works fine but not exporting images when img src is like
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAD... ">
And I have tried FileSaver.js and wordexport.js
but these are not allowing to fix header and footer.
Please give me any suggestion to resolve this issue
As the title explains, for some reason document.execCommand('heading', false, 'h1') (or any other heading size) does not work. However, other commands such as 'bold', 'link', et cetera, do work.
I am looking at caniuse and it seems to be supported across the board while there are "0 known issues."
Below is the code I am using. Notably, I tried embedding a demo and even creating a codepen, but for some reason none the of the commands work in either.
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function(){
document.designMode = 'on'
document.execCommand('heading', false, 'h1') // does not work
document.execCommand('bold', false, null) // will work
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++){
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
Any idea what is going on??
P.S. Below is the HTML and CSS in case you want to mess around with it in a browser.
<!DOCTYPE html>
<head>
<title>Is required and cannot be empty.</title>
<meta charset="UTF-8">\
<link rel="stylesheet" href="css/write.css">
</head>
<body>
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div> <!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div> <!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div> <!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
Not only is the photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine who was also unhappy with his picture.
Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately.
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
<script src="js/write.js"></script>
</body>
</html>
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing:border-box;
border:solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing:border-box;
border:solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing:border-box;
border:solid black 1px;
}
You are making a wrong assumption. The caniuse site states that execCommand is supported without issues, which is correct, but that doesn't mean that all the commands are supported. In fact, the caniuse page has a comment in the Notes section:
To determine what commands are supported, see Document.queryCommandSupported()
And if you check "heading", you'll see it is not supported in Chrome:
console.log(document.queryCommandSupported("heading"))
It is not supported on IE either. Firefox states that it supports it, but it may or may not be in the way you expect: instead of applying the heading styles to only the selected text, it applies it to the whole block (works like a "formatBlock" which makes sense as a heading is a block level element and not an inline element as a bold/italics would be).
If that works for you, there's a workaround that is using "formatBlock" as it is supported by Chrome, Firefox and IE:
console.log(document.queryCommandSupported("formatBlock"))
In that case, what you would do is setting the formatBlock to the heading you want (looks like an h1) and it will work:
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function() {
document.designMode = 'on'
document.execCommand('formatBlock', false, 'h1')
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++) {
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing: border-box;
border: solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
border: solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing: border-box;
border: solid black 1px;
}
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div>
<!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div>
<!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div>
<!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf
organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with. Not only is the
photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference
had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine
who was also unhappy with his picture. Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers
had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately. By portraying me in a sexual way to attendees,
this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift
could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
Now, if you want only the text that you selected to be an H1, then you could do a trick: use "insertHTML" to add the tags <h1> and </h1> surrounding the selected text (it will work on Edge, but not on Internet Explorer). Something like this:
const formatToolClass = document.getElementsByClassName('format-tool')
const preventDefault = (e) => e.preventDefault()
const applyStyle = function() {
document.designMode = 'on'
document.execCommand('insertHTML', false, '<h1>' + window.getSelection().toString() + '</h1>')
document.designMode = 'off'
}
for (let i = 0; i < formatToolClass.length; i++) {
formatToolClass[i].addEventListener('mousedown', preventDefault)
formatToolClass[i].addEventListener('click', applyStyle)
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#controls {
width: 100%;
height: 10%;
display: flex;
justify-content: space-around;
box-sizing: border-box;
border: solid red 1px;
}
.controls {
font-size: 1.5vmin;
display: flex;
justify-content: center;
align-items: flex-end;
box-sizing: border-box;
border: solid orange 1px;
}
#user-input {
width: 80%;
height: 90%;
max-width: 1440px;
padding: 1.25%;
overflow-y: visible;
overflow-x: hidden;
font-family: arial;
font-size: 3vmin;
color: #000;
box-sizing: border-box;
border: solid black 1px;
}
<div id="controls">
<div class="controls format-tool" id="controls-embolden" data-xcom="bold">Embolden</div>
<div class="controls format-tool" id="controls-italicize" data-xcom="italic">Italicize</div>
<div class="controls format-tool" id="controls-heading" data-xcom="heading">Heading</div>
<!---->
<div class="controls format-tool" id="controls-link" data-xcom="createLink">Link</div>
<!---->
<div class="controls format-tool" id="controls-list" data-xcom="insertUnorderedList">List</div>
<div class="controls format-tool" id="controls-image" data-xcom="insertImage">Image</div>
<!---->
<div class="controls" id="controls-shortcuts">Shortcuts</div>
<div class="controls" id="controls-save">Save</div>
<div class="controls" id="controls-publish">Publish</div>
</div>
<div id="user-input" contenteditable="true">
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf
organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with. Not only is the
photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference
had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine
who was also unhappy with his picture. Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers
had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately. By portraying me in a sexual way to attendees,
this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift
could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
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
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)
I've followed the instruction on implementing this simple jQuery Accordion, however, it looks messy on the webpage. If you go to Alchemy in Detail Tab you'll see the Zebra Accordion in action. http://www.planet.nu/dev/test/product-page.html
It's very messy, but if you try opening the Inspect Elements on your web browser (Firefox ro Chrome) it fixes itself! But when you refresh the page, it will revert back to its messy layout.
I'm not sure if my html is broken or the css.
<dl class="Zebra_Accordion">
<dt>Managed Services</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 class="alchemy-product-list-subnav">
<li class="alchemy-product-list">Full campaign management, from goal setting/strategy through to delivery and reporting </li>
<li class="alchemy-product-list">Dedicated Account Managers</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</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>
This is my CSS fro Zebra Accordion:
dl.Zebra_Accordion { width: 100%; font-family: Arial, sans-serif; font-size: 12px; }
dl.Zebra_Accordion dt { background: #000; color: #FFF; font-weight: bold; padding: 5px; }
dl.Zebra_Accordion dd { background: #EFEFEF; padding: 15px; margin: 1px 0; }
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #C40000; }
My jQuery from Zebra Accordion:
<script>
$(document).ready(function() {
var myAccordion = new $.Zebra_Accordion('.Zebra_Accordion', {
'collapsible': true
});
});
</script>
Well, since no one is answering my question I've found out that I just need to change the CSS. It may not be the best accordion out there, but it works well for jQuery 1.5.2 as many accordion plugins failed.
dl.Zebra_Accordion { width: 740px; font-size: 14px; }
dl.Zebra_Accordion dt { background: #878787; color: #FFF; font-weight: bold; padding: 8px; }
dl.Zebra_Accordion dd { background: #EFEFEF; padding-top: 5px; padding-bottom: 305px; margin: 0; }
dl.Zebra_Accordion dt.Zebra_Accordion_Expanded { background: #0095da; }
Also, the jQuery snippet didn't work out well so I'm using this one instead:
$(document).ready(function() {
new $.Zebra_Accordion($('.Zebra_Accordion'));
});