►
Description
It's time for our annual Koha Hackdown! This time we have a two round special where George and Christopher go head-to-head, battling to defend their methods for creating tabs in Koha pages. Who will come out on top? Only our viewers can decide. Be sure to weigh in on the comments.
Contents:
0:00 - Title
0:33 - Intro
3:06 - Round 1: Javascript/CSS Tabs
10:39 - Round 2: Bootstrap Tabs
22:34 - Summary
Referenced code:
https://hopperdietzel.org/koha_notes/tabbed_content
https://koha-us.org/wp-content/uploads/2022/02/Bootstrap-4-Tab-Example.txt
Music: https://www.bensound.com
Other sounds: https://zapsplat.com
A
A
That
was
a
suggestion
from
let's
see,
I
guess
it
was
season
two
episode:
eight
jquery
and
css
tweaking
the
reports.
Environment,
ed
veal
in
mckinney
texas
had
a
question
about
something
that
we
just
glanced
over
really
quickly
tabbed
content,
and
so
I
have
one
way
that
I
do
tab
content
on
the
reports,
circulation
and
the
main
page
in
the
staff
interface.
Christopher
has
a
different
way.
He
does
tab
content,
so
we're
calling
this
episode.
The
tab,
content.
A
I'll
show
off
how
I
do
it
and
then
christopher
can
show
off
how
he
does
it.
Yours
is
using
mostly
bootstrap
right,
you're,
using
elements
that
are
part
of
bootstrap
the
the
system
I'm
using.
I
actually
did
a
presentation
on
this
at
the
2017
quahog
us
conference
in
coeur,
d'alene,
idaho,
and
I
think
that
that
conference
presentation
was
recorded,
but
it's
one
of
those
ones.
It
was
one
of
the
first
ones
we
were.
A
So
it's
not
really
a
very
interactive
or
interesting
video,
and
so,
as
always,
you
can
find
all
of
our
videos
we're
part
of
koha
us
where
we
do
these
videos.
On
behalf
of
the
education
committee,
you
can
find
the
videos
currently
if
you
go
to
learn
and
scroll
down
to
watch
kohai
us
original
training,
videos
you'll,
find
all
our
videos
there.
Like.
A
A
A
And
the
where,
where
you're
going
to
find
my
copy
of
all
this
content
is
on
my
website,
I
created
a
page
that
it
was
easy
to
find,
and
I
want
to
point
out
that
this
isn't
code
that
I
just
magically
sat
down
and
created
by
myself.
It
came
from
github
sean2d2
at
github
and
there's
a
link
on
my
page
to
the
to
his
original
code
for
this,
and
I'm
just
going
to
copy
this
out
here.
I've
got
all
the
code.
A
A
All
of
this
stuff
here
is
css,
and
this
controls
the
style
of
the
tabs
where
they
appear
how
it's
all
going
to
look,
how
the
boxes
are
drawn
and
then
there's
some
javascript
that
gets
run
when
this
page
is
load,
and
this
creates
all
of
the
click
events.
You
know
what
happens
when
you
hover
over
one
of
the
when
you
hover
it
changes
the
color
of
the
tabs.
A
A
A
A
A
B
A
The
requests
that
have
a
lot
of
demand
at
their
library,
this
tab
has
links
to
statistics,
spreadsheets
wow,
there's
a
set
of
instructions
for
how
to
unlock
somebody's
account.
Here
are
last
year's
statistics,
and
then
we
have
some
a
tab.
That's
got
some
help
for
using
hoopla
thanks.
So
we
put
all
this
different
stuff
on
here
and
then
I
have
a
completely
different
set
of
tabs
on
the
reports
page
mostly
related
to
reports.
A
B
B
A
A
B
A
B
B
B
The
downside
is,
you
have
to
make
modifications
if
they
update
the
bootstrap,
because
I
found
that
I
did
a
bootstrap
version
and
then
they
then
the
community
upgraded
the
bootstrap
and
I
found
out
it
wasn't
the
most
current
bootstrap
and
the
most
current
bootstrap
versions.
Don't
work
in
this,
so
you
have
to
get
the
right,
bootstrap
version
in
order
to
to
get
this
to
work.
B
But
as
long
as
you
know
what
bootstrap
version
you're
working
in
you're
golden-
and
I
do
not
remember
off
the
top
of
my
head-
what
version
of
bootstrap,
but
I
will
find
out-
and
I
will
put
it
down
in
the
corner-
so
we
know
what
version
we're
working
with
on
this
video
anyways.
So
this
is
our
home
page
on
our
test
server
for
the
the
old
pack
and
right
now
it
has
just
some
buttons
in
there
I
have.
I
usually
have
the
cover
flow
going
on
this
page.
B
I'm
going
to
add
cover
flow,
but
the
issue
with
cover
flow
is
we.
We
have
different
categories
we
like
to
to
show
for
cover
flow,
and
I
don't
want
to
show
them
all
on
the
same
page.
So
I
like
to
have
those
in
tapped
categories.
So
what
I'm
going
to
do
is
I'm
going
to
grab
some
code
here?
Real
quick,
let
me
show
you
what
it's
going
to
look
like
all
together,
I
will
go
in
now.
This
is
in.
B
B
Is
the
basic
structure
of
what
I've
got
going
on?
This
is
not
all
of
the
code.
This
is
just
some
of
it
all
of
the
code.
That's
highlighted
here.
This
is
all
that
I
put
in
there
and
this.
This
is
the
button
panel
at
the
bottom,
but
this
is
all
of
what's
in
there,
but
the
structure,
the
structure
is,
you
know
somewhat
simple,
it's
I.
I
find
that
the
that
your
version,
the
java,
is
laid
out
a
little
bit
more
understandably
than
bootstrap.
B
It
took
me
a
little
bit
of
time
to
figure
out
how
bootstrap
worked
and
convert
over
to
it,
because
I
was
using
the
java
before
the
reason.
The
reason
I
went
over
to
bootstrap
was
because
I
was
strictly
dealing
with
a
html
and
bootstrap
html,
so
I
just
needed
to
learn
a
few
tags
attributes
to
to
add
to
my
different
tags,
and
I
was
able
to
put
these
tabs
together.
So
this
section
up
here,
this
unordered
list
is
your
list
of
tabs
that
you're
gonna
have
at
the
top.
B
I
just
have
one
in
here,
but
basically
you're
creating
a
list
item
and
you're
gonna.
You
have
to
make
sure
that
you're
paying
attention
to
the
classes
here,
so
this
has
a
class
of
nav
and
nav
tabs.
So
this
is
the
tabs
that
are
being
defined
and
then
the
class
for
each
of
these
items
is
nav
item
and
I
think,
there's
waves
effects
and
waves
light.
Those
are
different
options
I
didn't
play
with
any
of
this.
B
The
data
toggle
you
want
to
have
in
there
set
to
tab
and
the
h
reference
is
just
referencing.
The
let's
see
here.
What
is
it?
The
the
div?
That's
gonna
define
the
the
content
that
goes
in
that
panel
okay,
so
here
you're
you're
referencing
that
particular
div.
That
has
the
information
that
goes
in
there.
B
B
B
Piece
of
code
here
so
you'll
just
repeat
this:
every
time
that
you
want
to
make
a
new
tab
and
then
you'll
have
to
make
a
div
that
has
the
content
for
that
right.
One
now
I
have.
I
have
some.
I
have
some
extra
divs
in
here
because
I
I
laid
out
the
panel
like
I
created
the
the
tab
content
here,
so
it
contains
everything
all
of
the
the
different
panels
go
inside
this,
but
not
the
tabs
themselves.
So
inside
the
the
main
div
are
all
the
divs
that
have
the
different
sections.
B
I
have
this
div,
that's
called
the
nav
new
adult,
so
it
matches
my
tab
and
it
has
a
aria
labeled
by
equals,
and
then
it's
referring
back
to
well,
it's
actually
not
referring
to
anything.
It's
just.
I
just
call
it
nav
new
adult
tab.
I
thought
it
had
a
reference
back
to
that,
but
oh
yeah
yeah
it
did
okay.
So
the
idea
would
bring
back
to
the
the
id
of
that
tab.
B
B
Okay,
this
is
so
this
this
extra
little
div
down
here,
just
it
lives
down
at
the
bottom
of
that.
So
if
they
want
to
search
for
more
that
beyond
what
the
cover
flow
is
showing,
they
can
click
on
it.
This
is
an
actual
search,
so
I
did
a
search
did
an
advanced
search,
putting
in
all
the
the
criteria
to
match.
Basically,
you
know
the
kinds
of
things
that
I'm
looking
for
in
the
my
cover
flow,
and
so,
if
you
want
to
go
beyond
that,
you
click
on
this.
B
It
does
that
search
with
that
all
that
criteria,
and
it
comes
up
with
those
new
adult
items
that
are
in
our
catalog.
Okay.
So
that's
a
live
view
of
that
and
then
down
here.
So
these
are
all
the
the
opening
closing
divs
for
that
particular
piece
of
content,
and
you
just
repeat
that
so
this
div
from
here
down
to
here,
not
the
the
tab
content,
that's
the
one
that
wraps
around
absolutely
everything
right.
B
B
B
B
B
Both
you
know
have
a
level
of
complexity
to
it.
It's
not
straight
html.
You
do
have
to
have
a
little
bit
of
understanding.
I
had
to
go
and
research
the
bootstrap
version
of
tabbing
quite
a
bit
in
order
to
make
it
work.
You
know
I
tried
several
different
renditions
of
it
and
what
I
had
found.
What
I
was
running
into
was
I
wasn't
pulling.
I
wasn't
using
the
correct
version
of
bootstrap
because
they
do
it
differently
in
newer
versions.
B
B
I
think
too,
you
know,
because
I'm
doing
cover
flow
in
mine,
it
added
a
layer
of
complexity
to
it.
If
I
was
just
doing
straight
tabs,
you
know-
and
I-
and
I
really
should
have
you
know-
looked
at
what
you
had
ahead
of
time
and
mocked
up
the
exact
same
scenario
with
bootstrap
that
would
have
been
more
of
a
apples
to
apples.
This
is
a
little
more
apples
to
grab
bars.
B
So
it
you
know
it's
hard
to
compare
it
because
of
the
complexity
I
have
with
my
divs
in
there
just
because
I've
layered
some
things
in
there,
but
in
its
simplest
form
you
know,
I
I
think
that
it
might
compare
to
it.
But
the
nice
thing
is
I'm
not
dealing
with
a
bunch
of
css
to
make
it.
You
know
you
know
to
make
it
lay
out.
B
No
yeah,
I
I
like
this
it.
For
me
it
was
a
little
simpler
and
I
wasn't
having
to
stuff
all
of
this
into
javascript
somewhere.
Originally,
when
I
was
doing
javascript,
I
was
actually
sticking
it
in
the
jquery.
I
wasn't
sticking
it
in
the
actual
html
page
and
that
might
have
simplified
things
a
little
bit
for
me
too
yeah.
B
So
I
do
like
doing
it
straight
in
the
page
rather
than
having
to
do
it
elsewhere,
but
you
know
the
the
benef
another
thing
that
you
could
possibly
do
if
you're
using
the
same
css
over
and
over
and
over.
You
might
not
want
to
put
that
straight
in
your
in
your
code.
You
could
add
that
css
to
your
css
right
and
just
reuse
it
for
each
of
those
pages,
just
make
sure
you're
referencing
the
same
things
that
it
that
it
needs
right.
B
A
B
Been
a
a
lifesaver
for
scrolling-
and
I
know
that
you
know,
especially
when
it
comes
to
content
for
the
opec.
You
know,
save
your
patrons
all
that
work
of
scrolling
to
find
stuff.
If
you
can
organize
things
and
tabs,
make
it
a
little
bit
easier
to
to
to
group
stuff.
Your
your
patrons
are
going
to
be
happier.
A
B
And
before
you
go
be
sure
to
like
us
on
the
youtube
channel-
and
I
know
that
we
provide
the
link
within
our
kohai
us
but
make
sure
you
hop
over
to
the
youtube
channel
and
like
us
or
subscribe,
so
you
can
subscribe
to
the
entire
channel
or
you
can
subscribe
to
the
payload.
The
playlist
excuse
me
and
you'll
be
notified
every
time
that
we
put
up
a
new
video
yep
all
right
and
make
sure
you
comment.