Databases
StackOverflow2013
Postsdbo
POCollapse/Expand a content box with a toggle
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCollapse/Expand a content box with a toggle
    primarykey
    data
    text
    <p>I go right to the point, I have a few boxes that I want them to be expanded and collapsed with a toggle located in their headers. This toggle is an anchor tag which has a sprite background, the top part of this sprite image is pointing at top, and bottom section is pointing at down. You can guess what they mean and I want their state to be changed (first one for collapse and second one for expand)</p> <p>The structure of the boxes are something like this : </p> <pre><code> &lt;section class="box2"&gt; &lt;header class="box-head"&gt; &lt;div class="box-title fr"&gt; &lt;span class="box-icon"&gt;&lt;/span&gt; &lt;h3 class="box-title-text"&gt;Title Title&lt;/h3&gt; &lt;/div&gt; &lt;a class="box-toggle fl active" href="#"&gt;A&lt;/a&gt; &lt;br class="cfx" /&gt; &lt;/header&gt; &lt;div class="box-content"&gt; &lt;img src="img/chart-1.png" alt="" /&gt; //Content or collapsing data goes here &lt;/div&gt; &lt;/section&gt; </code></pre> <p>And I used one of the most straight forward ways to achieve this effect. You can see the following CSS and jQuery code below. (I chose active class as default when the icon is pointing at top) </p> <p>JS : </p> <pre><code> &lt;script type="text/javascript"&gt; $("a.box-toggle").toggle(function(){ $(this).addClass("active"); }, function () { $(this).removeClass("active"); }); //Slide up and down on click $("a.box-toggle").click(function(){ $(this).next("div.box-content").slideToggle("slow"); }); }); &lt;/script&gt; </code></pre> <p>CSS : </p> <pre><code>.widget-toggle { display: block; overflow: hidden; text-indent: -9999px; width: 18px; height: 9px; margin-top: 15px; margin-left: 13px; background: url(../img/sidebar-arrows.png) no-repeat 0 -18px; } .widget-toggle.active { background: url(../img/sidebar-arrows.png) no-repeat 0 0; } </code></pre> <p>Thanks for your huge help :)</p> <p><strong>Edit No. #1 :</strong> </p> <p>Thanks to @Recode , their tip worked just fine, But according to what I explained and you can see in this picture. I wanna show the state of this with an Icon <img src="https://i.stack.imgur.com/0fC2q.jpg" alt="enter image description here"></p> <p>Active is pointing at top and Inactive is pointing at bottom, when I want the box to be collapsed I'm showing "Active" and when I want the box to be expanded I'm showing "Inactive" . With this code I managed to show active at default (I set the class of each box to active manually, if there is a better way to set the default class to active or whatever else please note.) When I click on it, box collapses and the Icon transitions to Inactive state. And When I click again box expands but the Icon stays in the same state (Inactive and pointing at bottom). </p> <p>And after clicking : <img src="https://i.stack.imgur.com/Zxofz.png" alt="enter image description here"></p> <p>Here is the Code : </p> <pre><code>$("a.box-toggle").click(function(){ $(this).addClass("active"); }, function () { $(this).addClass("inactive"); }); </code></pre> <p>Thanks a lot, Again. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAli Tabibzadeh
    1. USAli Tabibzadeh
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCollapse/Expand a content box with a toggle
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload