-1

I am trying to make something like that: http://en.wikipedia.org/wiki/Bible On the right you'll see an infobox with buttons "Show":

enter image description here

What i've done so far following this guide: http://trog.qgl.org/20140923/setting-up-infobox-templates-in-mediawiki-v1-23/

  1. Downloaded and installed Scribuntu

  2. Copied css from this place: https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=edit to my Common.css

  3. Exported infobox template

  4. Imported infobox template

  5. Created infobox template and it worked, however i can't make my headers to be collapsible.

I googled and found this page http://dev.wikia.com/wiki/CollapsibleInfobox but there's no template for infobox (collapsible).

Could somebody help me?

Alexander Kim
  • 17,304
  • 23
  • 100
  • 157
  • what do you mean by ”can't make my headers to be collapsible”? What does the Bible infobox do, that your indofox doesn't do? And do you have a link? – leo Oct 03 '14 at 11:27
  • Can you take a look at area below the bible image, then you'll see Headers with the [show] link on the right, when you click on it - it does expands hidden content. Hope i explained it clear. – Alexander Kim Oct 03 '14 at 11:44
  • Ok, I was confused, because you wrote “[...]and it worked”. Glad you solved it, anyway – leo Oct 03 '14 at 11:53

2 Answers2

1

Solved my issue by adding class to infobox:

{{Infobox
 | abovestyle = background:#cfc;
 | above = Infobox
 | image = [[File:Parents.jpg|300px]]

 |header1 = Header 1
 |rowclass1 = class1 header hidden

 |label2 = 111
 |data2 = test1
 |rowclass2 = class1

 |header3 = Header 3
 |rowclass3  = class3 header hidden

 |label4 = 
 |data4  = data 4
 |rowclass4 = class3
}}

Then i have added this jQuery code to my Common.js:

    $('<a class="infoboxtoggle" href="#">+/-</a>').appendTo(
      $('.infobox tr.header').filter(function(){ return $(this).attr('class').split(" ").length > 1 }).find("th")
    );

    $(".infobox tr.header").each(function(){
      var $this = $(this);

      if( $this.hasClass("hidden") ){
        var firstclass = $this.attr("class").split(" ")[0];
        $this.siblings("." + firstclass).addClass("hidden");
      }
   });

    $('a.infoboxtoggle').click (
      function (infoboxtoggle)
      {
        var parent  = $(this).parent ();
        var grandparent  = parent.parent ();
        var firstclass  = grandparent.attr ('class').split(" ")[0];

        infoboxtoggle.preventDefault();
        grandparent.siblings ('.' + firstclass).has ('td').toggleClass ('hidden');
      }
    );

Then added bits of css:

a.infoboxtoggle { float: right; } /* positions the +/- */
.hidden { display: none; } /* hides hidden rows */
tr.header.hidden { display: table-row; } /* does _not_ hide headers */

Then it worked:

enter image description here

When you press on +/- it expands hidden rows.

Alexander Kim
  • 17,304
  • 23
  • 100
  • 157
-2

Did you have look to http://www.mediawiki.org/wiki/Manual:Collapsible_elements ? It explains how to make any element collapsible.

sigbert
  • 77
  • 5