diff --git a/wp-includes/class-wp-customize-section.php b/wp-includes/class-wp-customize-section.php
index ca8f1da625..73525ce41e 100644
--- a/wp-includes/class-wp-customize-section.php
+++ b/wp-includes/class-wp-customize-section.php
@@ -65,8 +65,8 @@ class WP_Customize_Section {
return;
?>
- title ); ?>
-
+ title ); ?>
+
description ) : ?>
description; ?>
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index 295d2e47a6..6b7530494b 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -2,17 +2,6 @@ body {
overflow: hidden;
}
-.customize-section {
- border-top: 1px solid #fff;
- border-bottom: 1px solid #dfdfdf;
- padding: 15px 20px;
- margin: 0;
-}
-
-.customize-section:last-child {
- box-shadow: 0 1px 0 0px #fff;
-}
-
#customize-controls {
width: 300px;
height: 100%;
@@ -26,6 +15,55 @@ body {
border-right: 1px solid rgba( 0, 0, 0, 0.2 );
}
+.customize-section {
+ border-top: 1px solid #fff;
+ border-bottom: 1px solid #dfdfdf;
+ margin: 0;
+}
+
+.customize-section:last-child {
+ box-shadow: 0 1px 0 0px #fff;
+}
+
+.customize-section-title {
+ margin: 0;
+ padding: 15px 20px;
+ position: relative;
+
+ cursor: pointer;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+.customize-section-content {
+ display: none;
+ padding: 0 20px 15px;
+}
+
+.customize-section.open .customize-section-content {
+ display: block;
+}
+
+.customize-section-title:after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-color: #ccc transparent transparent transparent;
+ border-style: solid;
+ border-width: 6px;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ z-index: 1;
+}
+
+.customize-section.open .customize-section-title:after {
+ top: 13px;
+ border-color: transparent transparent #ccc transparent;
+}
+
#customize-controls .theme-name {
font-size: 16px;
font-weight: bold;
@@ -54,45 +92,6 @@ body {
margin: 0;
}
-#customize-theme-controls ul ul {
- margin-top: 1em;
- display: none;
-}
-
-#customize-theme-controls ul h3 {
- margin: 0;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
-}
-
-#customize-theme-controls ul h3:hover {
- cursor: pointer;
-}
-
-#customize-theme-controls ul h3:after {
- content: '';
- border-color: #ccc transparent transparent transparent;
- border-style: solid;
- border-width: 6px;
- float: right;
- margin-top: 5px;
- margin-left: 5px;
-}
-
- #customize-theme-controls ul h3.open:after {
- -moz-transform: rotate(180deg);
- -webkit-transform: rotate(180deg);
- -o-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- transform: rotate(180deg);
- -moz-transform-origin: center 3px;
- -webkit-transform-origin: center 3px;
- -o-transform-origin: center 3px;
- -ms-transform-origin: center 3px;
- transform-origin: center 3px;
-}
-
#customize-footer {
border-bottom: 0;
border-top: 1px solid #dfdfdf;
diff --git a/wp-includes/customize-controls.php b/wp-includes/customize-controls.php
index 5beaacd39f..63508db24a 100644
--- a/wp-includes/customize-controls.php
+++ b/wp-includes/customize-controls.php
@@ -51,13 +51,15 @@ do_action( 'customize_controls_print_scripts' );
-
+
-
-
-
-
+
+
+
+
+
+
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index cfe66bb4d3..2f3309cfde 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -149,9 +149,8 @@
});
// Temporary accordion code.
- $('.control-section h3').click( function() {
- $( this ).siblings('ul').slideToggle( 200 );
- $( this ).toggleClass( 'open' );
+ $('.customize-section-title').click( function() {
+ $( this ).parents('.customize-section').toggleClass( 'open' );
return false;
});