これが問題を示すフィドルですhttp://jsfiddle.net/mjmitche/MMWXj/1/「About 」セクションと「Skills」セクションがあります。これらのセクションのいずれかのタイトルをクリックすると、関連するコンテンツを表示するドロップダウンが表示されます。「About」が開いている場合、「Skills」をクリックして開くと閉じます。ここで「約」をクリックしました...
About
this is About content revealed by click
Skills
そしてここで「スキル」をクリックしました
About
Skills
this is Skills content revealed by click
「about」タイトルと「skills」タイトルを重ねて表示するのではなく、並べて表示したいのですが、各div内のコンテンツの動作は同じです（スキルヘッダーにクリックされた）
About Skills
this is Skills content revealed by click
これは基本的なhtml構造です（問題の解決策を見つけたら、それらのビットを挿入し直すと状況が変わるのではないかと恐れて、一時的に不要なビットをいくつか残しました）。
それを達成する方法を説明していただければ幸いです...
<div id="who">
<h1 class="who closed">About</h1>
<div class="content">
<div id="latest" class="three_columns">
<p>
<strong>Boo!</strong>
</p>
</div>
</div>
</div>
<div id="what">
<h1 class="what closed">Skills</h1>
<div class="content">
<div id="consulting" class="three_columns">
<p>
<strong>Boo2!</strong>
</p>
</div>
</div>
</div>
--CSS
div.content { width: 500px; overflow: hidden; margin-left: auto; margin-right: auto;} /* This clears the floats of the child elements, see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
div.three_columns { float: left; width: 290px; margin: 0px; padding: 10px; }
#latest{
padding-left: 30px;
}
/* General headline styles */
/*h1 { font-size: 40px; margin: 0px; padding: 10px; cursor: pointer; }
h2 { font-size: 16px; }*/
h1.who, h1.what, h1.how {
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: center;
}
h2.who, h2.what, h2.how {
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: center;
}
.blue { color: #00b9f1; }
.green { color: #99cc00; }
/* General link styles - Colors: pink #ec008b, blue #00b9f1, dark gray #222, light gray #ebebeb; */
/*a { color: #222222; text-decoration: none; }
h1.hover, a:hover { color: #ec008b; cursor: pointer; }
h1.active, a:active { color: #00b9f1; cursor: pointer; }*/
/* General list styles */
ul { margin: 0px; padding: 0px; }
ul li { margin: 0px; padding: 0px; list-style: none; }
#cent {
margin-left: auto;
margin-right: auto;
width:
}
/*** Styles for the main content sections ***/
div#who, div#what, div#how { height: 100%; margin: 0px; padding: 0px; }
JS
$(function() {
// Hide all closed sections
$(".closed").next().hide();
// Add slide functions to all sections (h1 elements)
$("h1").click(function () {
if($(this).is('.closed')) {
$(".open").delay(200, function() { $(this).next().slideUp("slow"); });
$(this).delay(200, function() { $(this).next().slideDown("slow"); });
$("h1").deactivateElement();
$(this).activateElement();
}
else if($(this).is('.open')) {
$(this).delay(200, function() { $(this).next().slideUp("slow"); });
$(this).deactivateElement();
}
});
// Add a function to toggle the CSS styles
$("a#style_switcher").click(function () { flag = !flag; dark.disabled = flag; });
// Add hover functions to all sections (h1 elements)
$("h1").hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });
// Delay the call to (slide) functions
// => http://james.padolsey.com/javascript/jquery-delay-plugin/
$.fn.delay = function(time, callback) {
jQuery.fx.step.delay = function() {};
return this.animate( { delay: 1 }, time, callback);
}
// Set an element class to 'open' or 'closed'
$.fn.activateElement = function() { switchClasses($(this), 'open', 'closed'); }
$.fn.deactivateElement = function() { switchClasses($(this), 'closed', 'open'); }
// Do this at start
initialize();
$(".who").delay(600, function() { $(this).next().slideDown("slow"); });
$(".who").activateElement();
});
// Initialization function
function initialize () {
flag = true;
dark = document.getElementById("dark_css");
dark.disabled = flag;
// Set year in copyright section
document.getElementById('year').innerHTML = (new Date()).getFullYear();
}
// Utility function for switching/toggling classes
function switchClasses (element, classToAdd, classToRemove) {
element.addClass(classToAdd);
element.removeClass(classToRemove);
// De/Activate the given element
(classToAdd == 'open') ? element.addClass('active') : element.removeClass('active');
}