32:
139:
CSS classes. The CSS and JavaScript was removed after NavFrame was removed from, or replaced in, all articles in which it was used. Content with NavFrame today will display as uncollapsed. Users may wish to update their pages so that their collapsing elements continue to work as they prefer.
618:
within a Wiki article's markup code to identify certain content (which we'll call the "details" here) that we want the user to be able to "show" or "hide". The markup code used to achieve this effect comprises three main classes:
651:
The default behavior of this code will initially "show" the details, as well as a link to "hide" the details. To reverse the default behavior, so that the details are initially hidden, use
648:
part on or off. In web browsers that do not support
Javascript, or where Javascript is disabled, the content will always be displayed, and the "show"/"hide" links will not be present.
1430:
classes apply styles of their own. When mixing classes, this causes some of the Nav styles to override other styles (in the above example, NavFrame is overriding the styles from
1639:
1442:
All browsers from
Internet Explorer 5.5 and on (IE6/7/8, Firefox, Safari/Chrome/KHTML, Opera 8/9, etc.) that support JavaScript will properly collapse the elements.
1496:
1670:
972:
elements, then you can get an always-visible caption below optionally-hidden content, instead of an always-visible heading above optionally-hidden content:
46:
Either the page is no longer relevant or consensus on its purpose has become unclear. To revive discussion, seek broader input via a forum such as the
1555:
47:
1445:
Internet
Explorer 5 and browsers which do not support JavaScript will render the elements without the links and will not collapse them.
171:
1489:
869:
You can even apply other classes along with these, making a more styled design rather than if you were to use the standard classes:
365:
title, but does require the addition of a new div, as well as merging with any existing styles applied to the NavFrame elements:
1665:
1415:
Content added here. See how nicely it lines up to the left, instead of being centered? Far easier to read for many things.
1482:
1580:
157:
663:
to the NavContent element, because that will make it impossible for users without
Javascript to see the content.
127:
59:
361:
way, see below. This way retains colors, borders, and removes some jumpiness with the navigation toggle and a
1468:
77:
39:
31:
110:
114:
1631:
1530:
1457:
17:
358:
1659:
615:
610:
1309:
637:
488:"padding: 4px; border: 1px solid #a2a9b1; text-align: center; font-size: 95%;"
152:
Users should migrate away from NavFrame. They may do so in one of three ways:
106:
177:
To migrate the basic HTML with divs, here is the change you need to make:
515:"line-height: 1.6em; font-weight: bold; background-color: #ccf;"
1205:, and a dummy element to leave space for the "show/hide" link:
1394:
To have things lined up to the left, add in this line of code
102:
26:
101:
was a system of collapsible boxes. It used a combination of
1071:
If the title is too long, then the formatting is very bad:
85:
71:
CSS classes. Attempting to use NavFrame will not work.
38:
This page is currently inactive and is retained for
125:NavFrame has been removed in favour of using the
170:Background knowledge for 2 or 3 can be found at
1406:you want the text inside aligned to the left.
1490:
8:
1497:
1483:
1602:
1476:
659:) in the outer div element. Do not add
644:part, and to turn the visibility of the
1480:
968:If you swap the order of the two inner
770:To initially hide the content do this:
1671:Knowledge (XXG) essays about templates
1566:Left/right of body and/or in each list
964:Getting a caption instead of a heading
640:to add a "show" or "hide" link in the
609:The basic concept here is to use the
163:by migrating to a table structure, or
7:
1067:If the title doesn't fit on one line
109:, the source for which was found in
886:"messagebox standard-talk NavFrame"
636:The underlying implementation uses
25:
1194:To correct this, you need to add
166:by migrating the HTML themselves.
1478:Navigation templates comparison
30:
1066:
479:"mw-collapsible (mw-collapsed)"
291:"mw-collapsible (mw-collapsed)"
1644:2 or more autocollapse on page
1556:Navbox with collapsible groups
671:You will need to create three
141:
1:
53:The use of NavFrame has been
1402:to the first (or whichever)
506:"skin-nightmode-reset-color"
156:by selecting an appropriate
1687:
653:class="NavFrame collapsed"
75:
1432:.messagebox.standard-talk
931:"NavContent anotherclass"
904:"somerandomclass NavHead"
536:Collapsible content title
410:Collapsible content title
305:Collapsible content title
222:Collapsible content title
1398:style="text-align:left"
1396:
1207:
1073:
974:
871:
772:
677:
566:"mw-collapsible-content"
464:
372:
328:"mw-collapsible-content"
276:
184:
18:Knowledge (XXG):NAVFRAME
1604:Collapsible attributes
57:in favour of using the
1666:Inactive project pages
1640:jQuery.makeCollapsible
580:Collapsible content
438:Collapsible content
387:"NavFrame (collapsed)"
333:Collapsible content
250:Collapsible content
199:"NavFrame (collapsed)"
137:mw-collapsible-content
69:mw-collapsible-content
1591:Left/right of columns
1426:Currently, the three
1294:"hack-to-leave-space"
865:Mixed classes example
661:style="display:none;"
357:To migrate in a more
1198:to the style of the
787:"NavFrame collapsed"
158:collapsible template
111:MediaWiki:Common.css
1605:
1581:Navbox with columns
1504:
115:MediaWiki:Common.js
1632:Collapsible tables
1603:
1541:Left/right of body
1477:
575:"font-size: 100%;"
1654:
1653:
1601:
1600:
121:Deprecation notes
96:
95:
16:(Redirected from
1678:
1606:
1585:
1579:
1560:
1554:
1535:
1529:
1505:
1499:
1492:
1485:
1473:
1467:
1462:
1456:
1433:
1429:
1405:
1373:
1370:
1367:
1364:
1361:
1358:
1355:
1352:
1349:
1346:
1343:
1340:
1337:
1334:
1331:
1328:
1325:
1322:
1319:
1316:
1313:
1310:
1307:
1304:
1301:
1298:
1295:
1292:
1289:
1286:
1283:
1280:
1277:
1274:
1271:
1268:
1265:
1262:
1259:
1256:
1253:
1250:
1247:
1244:
1241:
1238:
1235:
1232:
1229:
1226:
1223:
1220:
1217:
1214:
1211:
1204:
1201:
1197:
1182:
1179:
1176:
1173:
1170:
1167:
1164:
1161:
1158:
1155:
1152:
1149:
1146:
1143:
1140:
1137:
1134:
1131:
1128:
1125:
1122:
1119:
1116:
1113:
1110:
1107:
1104:
1101:
1098:
1095:
1092:
1089:
1086:
1083:
1080:
1077:
1056:
1053:
1050:
1047:
1044:
1041:
1038:
1035:
1032:
1029:
1026:
1023:
1020:
1017:
1014:
1011:
1008:
1005:
1002:
999:
996:
993:
990:
987:
984:
981:
978:
971:
953:
950:
947:
944:
941:
938:
935:
932:
929:
926:
923:
920:
917:
914:
911:
908:
905:
902:
899:
896:
893:
890:
887:
884:
881:
878:
875:
854:
851:
848:
845:
842:
839:
836:
833:
830:
827:
824:
821:
818:
815:
812:
809:
806:
803:
800:
797:
794:
791:
788:
785:
782:
779:
776:
759:
756:
753:
750:
747:
744:
741:
738:
735:
732:
729:
726:
723:
720:
717:
714:
711:
708:
705:
702:
699:
696:
693:
690:
687:
684:
681:
674:
662:
658:
657:class="NavFrame"
654:
647:
643:
632:
598:
595:
592:
589:
586:
583:
579:
576:
573:
570:
567:
564:
561:
558:
555:
552:
549:
546:
542:
539:
535:
532:
531:"margin: 0 4em;"
529:
526:
523:
520:
516:
513:
510:
507:
504:
501:
498:
495:
492:
489:
486:
483:
480:
477:
474:
471:
468:
456:
453:
450:
447:
444:
441:
437:
434:
431:
428:
425:
422:
419:
416:
413:
409:
406:
403:
400:
397:
394:
391:
388:
385:
382:
379:
376:
351:
348:
345:
342:
339:
336:
332:
329:
326:
323:
320:
317:
314:
311:
308:
304:
301:
298:
295:
292:
289:
286:
283:
280:
268:
265:
262:
259:
256:
253:
249:
246:
243:
240:
237:
234:
231:
228:
225:
221:
218:
215:
212:
209:
206:
203:
200:
197:
194:
191:
188:
138:
134:
130:
88:
72:
70:
66:
62:
51:
34:
27:
21:
1686:
1685:
1681:
1680:
1679:
1677:
1676:
1675:
1656:
1655:
1636:mw-collapsible
1583:
1577:
1558:
1552:
1533:
1527:
1503:
1471:
1465:
1460:
1454:
1451:
1440:
1431:
1427:
1424:
1419:
1418:
1417:
1411:
1403:
1400:
1399:
1392:
1387:
1386:
1385:
1381:
1375:
1374:
1371:
1368:
1365:
1362:
1359:
1356:
1353:
1350:
1347:
1344:
1341:
1338:
1335:
1332:
1329:
1326:
1323:
1320:
1317:
1314:
1311:
1308:
1305:
1302:
1299:
1296:
1293:
1290:
1287:
1284:
1281:
1278:
1275:
1272:
1269:
1266:
1263:
1260:
1257:
1254:
1251:
1248:
1245:
1242:
1239:
1236:
1233:
1230:
1227:
1224:
1221:
1218:
1215:
1212:
1209:
1202:
1199:
1195:
1192:
1191:
1190:
1184:
1183:
1180:
1177:
1174:
1171:
1168:
1165:
1162:
1159:
1156:
1153:
1150:
1147:
1144:
1141:
1138:
1135:
1132:
1129:
1126:
1123:
1120:
1117:
1114:
1111:
1108:
1105:
1102:
1099:
1096:
1093:
1090:
1087:
1084:
1081:
1078:
1075:
1069:
1064:
1063:
1058:
1057:
1054:
1051:
1048:
1045:
1042:
1039:
1036:
1033:
1030:
1027:
1024:
1021:
1018:
1015:
1012:
1009:
1006:
1003:
1000:
997:
994:
991:
988:
985:
982:
979:
976:
969:
966:
961:
960:
955:
954:
951:
948:
945:
942:
939:
936:
933:
930:
927:
924:
921:
918:
915:
912:
909:
906:
903:
900:
897:
894:
891:
888:
885:
882:
879:
876:
873:
867:
862:
861:
856:
855:
852:
849:
846:
843:
840:
837:
834:
831:
828:
825:
822:
819:
816:
813:
810:
807:
804:
801:
798:
795:
792:
789:
786:
783:
780:
777:
774:
767:
766:
761:
760:
757:
754:
751:
748:
745:
742:
739:
736:
733:
730:
727:
724:
721:
718:
715:
712:
709:
706:
703:
700:
697:
694:
691:
688:
685:
682:
679:
672:
669:
660:
656:
652:
645:
641:
620:
607:
602:
601:
600:
599:
596:
593:
590:
587:
584:
581:
577:
574:
571:
568:
565:
562:
559:
556:
553:
550:
547:
543:
540:
537:
533:
530:
527:
524:
521:
517:
514:
511:
508:
505:
502:
499:
496:
493:
490:
487:
484:
481:
478:
475:
472:
469:
466:
463:
459:
458:
457:
454:
451:
448:
445:
442:
439:
435:
432:
429:
426:
423:
420:
417:
414:
411:
407:
404:
401:
398:
395:
392:
389:
386:
383:
380:
377:
374:
371:
355:
354:
353:
352:
349:
346:
343:
340:
337:
334:
330:
327:
324:
321:
318:
315:
312:
309:
306:
302:
299:
296:
293:
290:
287:
284:
281:
278:
275:
271:
270:
269:
266:
263:
260:
257:
254:
251:
247:
244:
241:
238:
235:
232:
229:
226:
223:
219:
216:
213:
210:
207:
204:
201:
198:
195:
192:
189:
186:
183:
150:
136:
132:
126:
123:
92:
91:
84:
80:
68:
64:
58:
52:
45:
23:
22:
15:
12:
11:
5:
1684:
1682:
1674:
1673:
1668:
1658:
1657:
1652:
1651:
1648:
1645:
1642:
1637:
1634:
1628:
1627:
1624:
1622:
1619:
1618:Collapses when
1616:
1613:
1610:
1599:
1598:
1595:
1592:
1589:
1586:
1574:
1573:
1570:
1567:
1564:
1561:
1549:
1548:
1545:
1542:
1539:
1536:
1524:
1523:
1521:
1518:
1515:
1512:
1509:
1502:
1501:
1494:
1487:
1479:
1475:
1474:
1463:
1450:
1447:
1439:
1436:
1423:
1420:
1413:
1412:
1410:Left-alignment
1409:
1408:
1397:
1391:
1390:Left-alignment
1388:
1382:
1378:
1377:
1376:
1208:
1187:
1186:
1185:
1074:
1068:
1065:
1060:
1059:
975:
965:
962:
957:
956:
872:
866:
863:
858:
857:
773:
769:
763:
762:
678:
668:
667:Simple example
665:
606:
603:
465:
461:
460:
373:
369:
368:
367:
364:
277:
273:
272:
185:
181:
180:
179:
172:MediaWiki wiki
168:
167:
164:
161:
149:
146:
128:mw-collapsible
122:
119:
94:
93:
90:
89:
81:
76:
73:
60:mw-collapsible
56:
44:
35:
24:
14:
13:
10:
9:
6:
4:
3:
2:
1683:
1672:
1669:
1667:
1664:
1663:
1661:
1649:
1646:
1643:
1641:
1638:
1635:
1633:
1630:
1629:
1625:
1623:initial state
1620:
1617:
1614:
1611:
1608:
1607:
1596:
1593:
1590:
1587:
1582:
1576:
1575:
1571:
1568:
1565:
1562:
1557:
1551:
1550:
1546:
1543:
1540:
1537:
1532:
1526:
1525:
1520:Style (body)
1519:
1516:
1513:
1510:
1507:
1506:
1500:
1495:
1493:
1488:
1486:
1481:
1470:
1464:
1459:
1453:
1452:
1448:
1446:
1443:
1438:Accessibility
1437:
1435:
1421:
1416:
1407:
1395:
1389:
1384:
1380:
1303:"float:right"
1276:"height:auto"
1249:"width: 20em"
1206:
1189:
1072:
1062:
973:
963:
959:
870:
864:
860:
771:
765:
676:
666:
664:
649:
639:
634:
631:
627:
623:
617:
614:
613:
604:
366:
362:
360:
359:pixel-perfect
178:
175:
173:
165:
162:
159:
155:
154:
153:
147:
145:
143:
129:
120:
118:
116:
112:
108:
104:
100:
87:
83:
82:
79:
74:
61:
54:
49:
43:
41:
36:
33:
29:
28:
19:
1588:collapsible
1563:collapsible
1538:collapsible
1522:parameter/s
1511:Collapsible
1469:Hidden begin
1444:
1441:
1425:
1414:
1404:<div: -->
1401:
1393:
1383:
1379:
1342:"NavContent"
1222:"width:20em"
1193:
1188:
1151:"NavContent"
1088:"width:20em"
1070:
1061:
1007:"NavContent"
967:
958:
868:
859:
832:"NavContent"
768:
764:
737:"NavContent"
670:
655:(instead of
650:
635:
629:
625:
621:
611:
608:
433:"NavContent"
356:
245:"NavContent"
176:
169:
151:
133:mw-collapsed
124:
98:
97:
65:mw-collapsed
48:village pump
37:
1612:CSS classes
1422:Limitations
1196:height:auto
86:WP:NAVFRAME
1660:Categories
1615:JavaScript
1240:"NavFrame"
1106:"NavFrame"
989:"NavFrame"
692:"NavFrame"
675:elements:
646:NavContent
638:JavaScript
630:NavContent
605:How to use
107:JavaScript
42:reference.
40:historical
1508:Template
1449:Templates
1267:"NavHead"
1124:"NavHead"
1034:"NavHead"
805:"NavHead"
710:"NavHead"
405:"NavHead"
217:"NavHead"
148:Migration
142:See below
1626:Nesting
622:NavFrame
363:centered
99:NavFrame
78:Shortcut
1621:Custom
1200:NavHead
642:NavHead
626:NavHead
616:element
55:removed
1531:Navbox
1517:Groups
1458:Hidden
1514:Image
1372:: -->
1366:</
1363:: -->
1357:</
1354:: -->
1348:</
1345:: -->
1336:class
1327:: -->
1321:</
1318:: -->
1312:</
1306:: -->
1297:style
1288:class
1279:: -->
1270:style
1261:class
1252:: -->
1243:style
1234:class
1225:: -->
1216:style
1181:: -->
1175:</
1172:: -->
1166:</
1163:: -->
1157:</
1154:: -->
1145:class
1136:: -->
1130:</
1127:: -->
1118:class
1109:: -->
1100:class
1091:: -->
1082:style
1055:: -->
1049:</
1046:: -->
1040:</
1037:: -->
1028:class
1019:: -->
1013:</
1010:: -->
1001:class
992:: -->
983:class
952:: -->
946:</
943:: -->
937:</
934:: -->
925:class
916:: -->
910:</
907:: -->
898:class
889:: -->
880:class
853:: -->
847:</
844:: -->
838:</
835:: -->
826:class
817:: -->
811:</
808:: -->
799:class
790:: -->
781:class
758:: -->
752:</
749:: -->
743:</
740:: -->
731:class
722:: -->
716:</
713:: -->
704:class
695:: -->
686:class
597:: -->
591:</
588:: -->
582:</
578:: -->
569:style
560:class
551:: -->
545:</
544:: -->
538:</
534:: -->
525:style
518:: -->
509:style
500:class
491:: -->
482:style
473:class
455:: -->
449:</
446:: -->
440:</
436:: -->
427:class
418:: -->
412:</
408:: -->
399:class
390:: -->
381:class
350:: -->
344:</
341:: -->
335:</
331:: -->
322:class
313:: -->
307:</
303:: -->
294:: -->
285:class
267:: -->
261:</
258:: -->
252:</
248:: -->
239:class
230:: -->
224:</
220:: -->
211:class
202:: -->
193:class
1650:Yes
1609:Type
1597:Yes
1572:Yes
1547:Yes
1498:edit
1491:talk
1484:view
1428:Nav*
1330:<
1282:<
1255:<
1228:<
1210:<
1139:<
1112:<
1094:<
1076:<
1022:<
995:<
977:<
919:<
892:<
874:<
820:<
793:<
775:<
725:<
698:<
680:<
554:<
519:<
494:<
467:<
421:<
393:<
375:<
370:From
316:<
297:<
279:<
233:<
205:<
187:<
182:From
160:, or
135:and
113:and
105:and
67:and
1647:Yes
1569:Yes
1544:Yes
1434:).
1369:div
1360:div
1351:div
1333:div
1324:div
1315:div
1285:div
1258:div
1231:div
1213:div
1203:div
1178:div
1169:div
1160:div
1142:div
1133:div
1115:div
1097:div
1079:div
1052:div
1043:div
1025:div
1016:div
998:div
980:div
970:div
949:div
940:div
922:div
913:div
895:div
877:div
850:div
841:div
823:div
814:div
796:div
778:div
755:div
746:div
728:div
719:div
701:div
683:div
673:div
612:div
594:div
585:div
557:div
548:div
541:div
522:div
497:div
470:div
452:div
443:div
424:div
415:div
396:div
378:div
347:div
338:div
319:div
310:div
300:div
282:div
264:div
255:div
236:div
227:div
208:div
190:div
103:CSS
1662::
1594:No
1584:}}
1578:{{
1559:}}
1553:{{
1534:}}
1528:{{
1472:}}
1466:{{
1461:}}
1455:{{
633:.
628:,
624:,
462:To
274:To
174:.
144:.
131:,
117:.
63:,
1339:=
1300:=
1291:=
1273:=
1264:=
1246:=
1237:=
1219:=
1148:=
1121:=
1103:=
1085:=
1031:=
1004:=
986:=
928:=
901:=
883:=
829:=
802:=
784:=
734:=
707:=
689:=
572:=
563:=
528:=
512:=
503:=
485:=
476:=
430:=
402:=
384:=
325:=
288:=
242:=
214:=
196:=
50:.
20:)
Text is available under the Creative Commons Attribution-ShareAlike License. Additional terms may apply.
