Challenge for Tumbleweed

[T.C.]

Hey Tumbleweed

I have this code i'd like for you to look at and see if you can get it to work on the title wrapper if you have the time. I know if anyone can get it working it's you 

It's HTML and CSS, collapsible categories with +/- images depending on whether they're collapsed or open.

Here's a link to where i'm testing it realmisfitz2.freeforums.net/page/collapse and the code is below.

 

SPOILER: Click to show

SPOILER: Click to show

<style>

/** Collapsible content */

.cc{

position: relative;

}

.cc_control{

display: none;

}



.cc_title{

background-color: rgba(255, 255, 255, 0.7);

color: #fff;

font: bold 1em/normal Helvetica;

text-shadow: 1px 2px 0 #000;

border: 1px solid #111;



-webkit-box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;

-moz-box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;

box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;



-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;



display: block;

padding: .6em 20px .6em 40px;

position: relative;

cursor: pointer;

}

.cc_title::before{

content: "";

background: #222 url("http://storage.proboards.com/5618816/i/qATIBjKvGLICVHGE2s6Z.png") no-repeat 0 50%;



-webkit-background-origin: content;

-khtml-background-origin: content;

-moz-background-origin: content;

background-origin: content-box;



-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;



display: inline-block;

position: absolute;



width: 18px;

height: 18px;

left: 12px;

top: 50%;

padding: 1px;

margin: -10px 0 0;

}



.cc_body{

display: none;

padding: 3.4em 2em 1em;

border-radius: .5em;

margin: 0;

}





/** Opened state */

.cc_control:checked ~ .cc_title{

margin-bottom: -2.4em;



-webkit-box-shadow: inset 0 1px 1px #ddd;

-moz-box-shadow: inset 0 1px 1px #ddd;

box-shadow: inset 0 1px 1px #ddd;



-webkit-border-radius: .5em .5em 0 0;

-moz-border-radius: .5em .5em 0 0;

border-radius: .5em .5em 0 0;

}

.cc_control:checked ~ .cc_title::before{

background-position: -36px 50%;

}



.cc_control:checked ~ .cc_body{

display: block;

box-shadow: 0 0 12px -4px #000;

}





/** Separate content blocks if not grouped */

.cc + .cc{

margin-top: .5em;

}





/** Grouped content blocks */

.ccg{

-webkit-box-shadow: 0 0 12px -4px #000;

-moz-box-shadow: 0 0 12px -4px #000;

box-shadow: 0 0 12px -4px #000;



-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

}

.ccg .cc + .cc{

margin-top: 0;

}



.ccg .cc_title{

-webkit-border-radius: .5em .5em 0 0;

-moz-border-radius: .5em .5em 0 0;

border-radius: .5em .5em 0 0;



-webkit-box-shadow: inset 0 1px 1px #ddd;

-moz-box-shadow: inset 0 1px 1px #ddd;

box-shadow: inset 0 1px 1px #ddd;

}



.ccg .cc_body{

margin-bottom: -1em;

padding-bottom: 2em;



-webkit-border-radius: .5em .5em 0 0 !important;

-moz-border-radius: .5em .5em 0 0 !important;

border-radius: .5em .5em 0 0 !important;



-webkit-box-shadow: none !important;

-moz-box-shadow: none !important;

box-shadow: none !important;

}



.ccg .cc + .cc .cc_title,

.ccg .cc + .cc .cc_control:checked ~ .cc_title,

.ccg .cc + .cc .cc_control:checked ~ .cc_body{

-webkit-border-radius: 0;

-moz-border-radius: 0;

border-radius: 0;

}



.ccg .cc:last-of-type .cc_title{

-webkit-border-radius: 0 0 .5em .5em;

-moz-border-radius: 0 0 .5em .5em;

border-radius: 0 0 .5em .5em;

}



.ccg .cc:last-of-type .cc_body{

-webkit-border-radius: 0 0 .5em .5em !important;

-moz-border-radius: 0 0 .5em .5em !important;

border-radius: 0 0 .5em .5em !important;

padding-bottom: 1em;

}

</style>







<div class="ccg">

<div class="cc">

<input id="cc_1" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_1" class="cc_title">Category 1</label>

<ul class="cc_body">

<li>The Arrival of the Fimbul Winter</li>

<li>Sorrow Throughout the Nine Worlds</li>

<li>Once Sent from the Golden Hall</li>

<li>The Avenger</li>

<li>The Crusher</li>

<li>Versus the World</li>

</ul>



</div>



<div class="cc">

<input id="cc_2" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_2" class="cc_title">Category 2</label>

<ul class="cc_body">



</ul>



</div>





<div class="cc">

<input id="cc_3" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_3" class="cc_title">Category 3</label>

<ul class="cc_body">



</ul>



</div>

[Tumbleweed]

Oct 3, 2016 14:02:20 GMT -8 T.C. said:

Hey Tumbleweed

I have this code i'd like for you to look at and see if you can get it to work on the title wrapper if you have the time. I know if anyone can get it working it's you 

It's HTML and CSS, collapsible categories with +/- images depending on whether they're collapsed or open.

Here's a link to where i'm testing it realmisfitz2.freeforums.net/page/collapse and the code is below.

 

SPOILER: Click to show

SPOILER: Click to show

<style>

/** Collapsible content */

.cc{

position: relative;

}

.cc_control{

display: none;

}



.cc_title{

background-color: rgba(255, 255, 255, 0.7);

color: #fff;

font: bold 1em/normal Helvetica;

text-shadow: 1px 2px 0 #000;

border: 1px solid #111;



-webkit-box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;

-moz-box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;

box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;



-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;



display: block;

padding: .6em 20px .6em 40px;

position: relative;

cursor: pointer;

}

.cc_title::before{

content: "";

background: #222 url("http://storage.proboards.com/5618816/i/qATIBjKvGLICVHGE2s6Z.png") no-repeat 0 50%;



-webkit-background-origin: content;

-khtml-background-origin: content;

-moz-background-origin: content;

background-origin: content-box;



-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;



display: inline-block;

position: absolute;



width: 18px;

height: 18px;

left: 12px;

top: 50%;

padding: 1px;

margin: -10px 0 0;

}



.cc_body{

display: none;

padding: 3.4em 2em 1em;

border-radius: .5em;

margin: 0;

}





/** Opened state */

.cc_control:checked ~ .cc_title{

margin-bottom: -2.4em;



-webkit-box-shadow: inset 0 1px 1px #ddd;

-moz-box-shadow: inset 0 1px 1px #ddd;

box-shadow: inset 0 1px 1px #ddd;



-webkit-border-radius: .5em .5em 0 0;

-moz-border-radius: .5em .5em 0 0;

border-radius: .5em .5em 0 0;

}

.cc_control:checked ~ .cc_title::before{

background-position: -36px 50%;

}



.cc_control:checked ~ .cc_body{

display: block;

box-shadow: 0 0 12px -4px #000;

}





/** Separate content blocks if not grouped */

.cc + .cc{

margin-top: .5em;

}





/** Grouped content blocks */

.ccg{

-webkit-box-shadow: 0 0 12px -4px #000;

-moz-box-shadow: 0 0 12px -4px #000;

box-shadow: 0 0 12px -4px #000;



-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

}

.ccg .cc + .cc{

margin-top: 0;

}



.ccg .cc_title{

-webkit-border-radius: .5em .5em 0 0;

-moz-border-radius: .5em .5em 0 0;

border-radius: .5em .5em 0 0;



-webkit-box-shadow: inset 0 1px 1px #ddd;

-moz-box-shadow: inset 0 1px 1px #ddd;

box-shadow: inset 0 1px 1px #ddd;

}



.ccg .cc_body{

margin-bottom: -1em;

padding-bottom: 2em;



-webkit-border-radius: .5em .5em 0 0 !important;

-moz-border-radius: .5em .5em 0 0 !important;

border-radius: .5em .5em 0 0 !important;



-webkit-box-shadow: none !important;

-moz-box-shadow: none !important;

box-shadow: none !important;

}



.ccg .cc + .cc .cc_title,

.ccg .cc + .cc .cc_control:checked ~ .cc_title,

.ccg .cc + .cc .cc_control:checked ~ .cc_body{

-webkit-border-radius: 0;

-moz-border-radius: 0;

border-radius: 0;

}



.ccg .cc:last-of-type .cc_title{

-webkit-border-radius: 0 0 .5em .5em;

-moz-border-radius: 0 0 .5em .5em;

border-radius: 0 0 .5em .5em;

}



.ccg .cc:last-of-type .cc_body{

-webkit-border-radius: 0 0 .5em .5em !important;

-moz-border-radius: 0 0 .5em .5em !important;

border-radius: 0 0 .5em .5em !important;

padding-bottom: 1em;

}

</style>







<div class="ccg">

<div class="cc">

<input id="cc_1" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_1" class="cc_title">Category 1</label>

<ul class="cc_body">

<li>The Arrival of the Fimbul Winter</li>

<li>Sorrow Throughout the Nine Worlds</li>

<li>Once Sent from the Golden Hall</li>

<li>The Avenger</li>

<li>The Crusher</li>

<li>Versus the World</li>

</ul>



</div>



<div class="cc">

<input id="cc_2" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_2" class="cc_title">Category 2</label>

<ul class="cc_body">



</ul>



</div>





<div class="cc">

<input id="cc_3" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_3" class="cc_title">Category 3</label>

<ul class="cc_body">



</ul>



</div>

I have another member I need to be helping but can't seem to find the time but I do want to clarify if you are wanting this to actually operate on your existing categories? Is that what you are asking?

[T.C.]

Oct 5, 2016 9:07:22 GMT -8 Tumbleweed said:

Oct 3, 2016 14:02:20 GMT -8 T.C. said:

Hey Tumbleweed

I have this code i'd like for you to look at and see if you can get it to work on the title wrapper if you have the time. I know if anyone can get it working it's you 

It's HTML and CSS, collapsible categories with +/- images depending on whether they're collapsed or open.

Here's a link to where i'm testing it realmisfitz2.freeforums.net/page/collapse and the code is below.

 

SPOILER: Click to show

SPOILER: Click to show

<style>

/** Collapsible content */

.cc{

position: relative;

}

.cc_control{

display: none;

}



.cc_title{

background-color: rgba(255, 255, 255, 0.7);

color: #fff;

font: bold 1em/normal Helvetica;

text-shadow: 1px 2px 0 #000;

border: 1px solid #111;



-webkit-box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;

-moz-box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;

box-shadow: inset 0 1px 1px #ddd, 0 0 12px -4px #000;



-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;



display: block;

padding: .6em 20px .6em 40px;

position: relative;

cursor: pointer;

}

.cc_title::before{

content: "";

background: #222 url("http://storage.proboards.com/5618816/i/qATIBjKvGLICVHGE2s6Z.png") no-repeat 0 50%;



-webkit-background-origin: content;

-khtml-background-origin: content;

-moz-background-origin: content;

background-origin: content-box;



-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;



display: inline-block;

position: absolute;



width: 18px;

height: 18px;

left: 12px;

top: 50%;

padding: 1px;

margin: -10px 0 0;

}



.cc_body{

display: none;

padding: 3.4em 2em 1em;

border-radius: .5em;

margin: 0;

}





/** Opened state */

.cc_control:checked ~ .cc_title{

margin-bottom: -2.4em;



-webkit-box-shadow: inset 0 1px 1px #ddd;

-moz-box-shadow: inset 0 1px 1px #ddd;

box-shadow: inset 0 1px 1px #ddd;



-webkit-border-radius: .5em .5em 0 0;

-moz-border-radius: .5em .5em 0 0;

border-radius: .5em .5em 0 0;

}

.cc_control:checked ~ .cc_title::before{

background-position: -36px 50%;

}



.cc_control:checked ~ .cc_body{

display: block;

box-shadow: 0 0 12px -4px #000;

}





/** Separate content blocks if not grouped */

.cc + .cc{

margin-top: .5em;

}





/** Grouped content blocks */

.ccg{

-webkit-box-shadow: 0 0 12px -4px #000;

-moz-box-shadow: 0 0 12px -4px #000;

box-shadow: 0 0 12px -4px #000;



-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

}

.ccg .cc + .cc{

margin-top: 0;

}



.ccg .cc_title{

-webkit-border-radius: .5em .5em 0 0;

-moz-border-radius: .5em .5em 0 0;

border-radius: .5em .5em 0 0;



-webkit-box-shadow: inset 0 1px 1px #ddd;

-moz-box-shadow: inset 0 1px 1px #ddd;

box-shadow: inset 0 1px 1px #ddd;

}



.ccg .cc_body{

margin-bottom: -1em;

padding-bottom: 2em;



-webkit-border-radius: .5em .5em 0 0 !important;

-moz-border-radius: .5em .5em 0 0 !important;

border-radius: .5em .5em 0 0 !important;



-webkit-box-shadow: none !important;

-moz-box-shadow: none !important;

box-shadow: none !important;

}



.ccg .cc + .cc .cc_title,

.ccg .cc + .cc .cc_control:checked ~ .cc_title,

.ccg .cc + .cc .cc_control:checked ~ .cc_body{

-webkit-border-radius: 0;

-moz-border-radius: 0;

border-radius: 0;

}



.ccg .cc:last-of-type .cc_title{

-webkit-border-radius: 0 0 .5em .5em;

-moz-border-radius: 0 0 .5em .5em;

border-radius: 0 0 .5em .5em;

}



.ccg .cc:last-of-type .cc_body{

-webkit-border-radius: 0 0 .5em .5em !important;

-moz-border-radius: 0 0 .5em .5em !important;

border-radius: 0 0 .5em .5em !important;

padding-bottom: 1em;

}

</style>







<div class="ccg">

<div class="cc">

<input id="cc_1" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_1" class="cc_title">Category 1</label>

<ul class="cc_body">

<li>The Arrival of the Fimbul Winter</li>

<li>Sorrow Throughout the Nine Worlds</li>

<li>Once Sent from the Golden Hall</li>

<li>The Avenger</li>

<li>The Crusher</li>

<li>Versus the World</li>

</ul>



</div>



<div class="cc">

<input id="cc_2" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_2" class="cc_title">Category 2</label>

<ul class="cc_body">



</ul>



</div>





<div class="cc">

<input id="cc_3" type="checkbox" class="cc_control" checked="checked" />

<label for="cc_3" class="cc_title">Category 3</label>

<ul class="cc_body">



</ul>



</div>

I have another member I need to be helping but can't seem to find the time but I do want to clarify if you are wanting this to actually operate on your existing categories? Is that what you are asking?

Yes, and no rush. I know you stay hooked up!

[Tumbleweed]

Oct 5, 2016 10:40:30 GMT -8 T.C. said:

Oct 5, 2016 9:07:22 GMT -8 Tumbleweed said:

I have another member I need to be helping but can't seem to find the time but I do want to clarify if you are wanting this to actually operate on your existing categories? Is that what you are asking?

Yes, and no rush. I know you stay hooked up!

I may have time after-all but you didn't answer my question.

[T.C.]

Oct 5, 2016 12:51:52 GMT -8 Tumbleweed said:

Oct 5, 2016 10:40:30 GMT -8 T.C. said:

Yes, and no rush. I know you stay hooked up!

I may have time after-all but you didn't answer my question.

I did so.   I'd like to be able to collapse the categories and have the - image display while open and the + display while closed. 

[Former Member]

This is already the behavior I'm seeing ??

[T.C.]

Oct 5, 2016 13:39:53 GMT -8 @synthtec said:

This is already the behavior I'm seeing ??

Oh it works fine as is. I'd like to use it on the forum categories and title wrappers. 

[Former Member]

Oh ok I get you now.

Ideally you would want to use it on the "title-bar" so you wouldn't have to traverse the DOM has much, then target/toggle the closest "content" element.

I think Tumbleweed is taking care of this for you right?

[T.C.]

Oct 5, 2016 13:48:36 GMT -8 @synthtec said:

Oh ok I get you now.

Ideally you would want to use it on the "title-bar" so you wouldn't have to traverse the DOM has much, then target/toggle the closest "content" element.

I think Tumbleweed is taking care of this for you right?

I believe so if time allows, but i'm sure she'd accept your contribution.

[Former Member]

I don't want to step on her toes so I'll leave it with her.
If she don't have the time, then sure I'll have a look at it for you

[Tumbleweed]

Oct 5, 2016 14:17:52 GMT -8 @synthtec said:

I don't want to step on her toes so I'll leave it with her.
If she don't have the time, then sure I'll have a look at it for you

By all means, go for it, Phil82 and thanks for the offer.  I have been busy and just jump on here mostly to check if there is anything that needs attention. It's been so beautiful out doors that I'm spending my free time working on my yard and outdoor things that were put on hold because I hate hot weather.

[Former Member]

Sure no worries, I'll have a crack at it tomorrow, getting late for me now, way past my bed time :)

[Former Member]

I created a little mockup that is independent of the toggle code you are using over on codepen Mockup

I didn't want to pull the images from wordpress(the original source), so I used font awesome instead, is this something you would prefer?

It's not finished but it should give you some idea of how I would approach it.

Slidetoggle is a little bit choppy unless the element has a set height, so I may not use that and just animate the height/max-height myself

[You can remove the original plugin]

admin->themes->advanced_styles&&css
.container{
 .title-bar{
   h2{
     margin: 0;
     font-size: 1.25rem;
     
     .title_wrapper{
       label{
         input[type='checkbox']{
           display: none;
           
           &:checked ~ span{
             &:before{
               content: '\f0ab';
             }
           }
         }
         span{
           cursor: pointer;
           height: 20px;
           width: 20px;
           display: inline-block;
           z-index: 999;
           position: relative;
           
           &:before{
             font-family: Fontawesome;
             content: '\f0aa';
             font-size: 1.25rem;
           }
         }
       }
     }
   }
 }
}

admin->structure->global header/footer
<script>
(function($){
 
 function toggle(){
 
   $('.title-bar')
     .find('input[type="checkbox"]')
     .on('change', function(){
       $(this)
         .parents('.title-bar')
         .next()
         .slideToggle(300, 'linear');
     });
 }
 
 $(toggle());
})(jQuery);
</script>

admin->themes->layouts->home
<div class="title-bar bbcode">
   <h2>
      <div class="title_wrapper">
         <label>
           <input type='checkbox' />
           <span></span>
         </label>
         $[category.display_name]
      </div>
   </h2>
</div>


Custom Page
<div class="container">
   <div class="title-bar">
      <h2>
         <div class="title_wrapper">
             <label>
                <input type='checkbox' />
                <span></span>
             </label>
             YOUR TITLE
         </div>
      </h2>
   </div>

   <div class="content cap-bottom">
YOUR CONTENT
   </div>
</div>


You may also need to add fontawesome to your wrapper, not sure if proboards already uses it.

admin->themes->layouts->forum_wrapper inside the head tag
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>


If you wish to use the plus(\f055) and minus(\f056) icons instead, just use those codes instead, inside the span content tags.

content: '\f055';

[T.C.]

Thank you. I'll test it once I get to my machine.

[T.C.]

Looks great and functions as intended as well @synthtec. I appreciate your time and effort immensely.