u003c!DOCTYPE htmlu003enu003chtml lang=u0022enu0022u003enu003cheadu003en u003cmeta charset=u0022UTF-8u0022u003en u003cmeta name=u0022viewportu0022 content=u0022width=device-width, initial-scale=1.0u0022u003en u003ctitleu003eDivi 5 Practical User Guideu003c/titleu003en u003cstyleu003en /* u002du002d- General Styling u002du002d- */n :root {n u002du002ddivi-purple: #6C2EB9;n u002du002ddivi-blue: #2E74B5;n u002du002ddivi-green: #00C3AA;n u002du002ddark-text: #32373c;n u002du002dlight-bg: #f8f9fa;n u002du002dwhite: #ffffff;n }nn body {n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;n background-color: var(u002du002dlight-bg);n color: var(u002du002ddark-text);n line-height: 1.6;n margin: 0;n padding: 0;n }nn .container {n max-width: 900px;n margin: 0 auto;n padding: 40px 20px;n }nn h1, h2, h3 {n color: var(u002du002ddark-text);n }nn h1 {n text-align: center;n color: var(u002du002ddivi-purple);n margin-bottom: 10px;n }nn p.subtitle {n text-align: center;n color: #666;n margin-bottom: 50px;n }nn /* u002du002d- Section Styling u002du002d- */n .guide-section {n background: var(u002du002dwhite);n padding: 30px;n border-radius: 12px;n box-shadow: 0 4px 15px rgba(0,0,0,0.05);n margin-bottom: 40px;n }nn .guide-title {n border-bottom: 2px solid var(u002du002dlight-bg);n padding-bottom: 15px;n margin-bottom: 20px;n font-size: 1.5rem;n }nn /* u002du002d- TABS COMPONENT (For Interface Guide) u002du002d- */n .tabs-nav {n display: flex;n gap: 10px;n margin-bottom: 20px;n flex-wrap: wrap;n }nn .tab-btn {n background: var(u002du002dlight-bg);n border: none;n padding: 12px 24px;n border-radius: 50px;n cursor: pointer;n font-weight: 600;n color: #666;n transition: all 0.3s ease;n }nn .tab-btn:hover {n background: #e2e6ea;n }nn .tab-btn.active {n background: var(u002du002ddivi-purple);n color: var(u002du002dwhite);n }nn .tab-content {n display: none;n animation: fadeIn 0.5s;n }nn .tab-content.active {n display: block;n }nn /* u002du002d- ACCORDION COMPONENT (For Modules) u002du002d- */n .accordion-item {n border-bottom: 1px solid #eee;n }nn .accordion-header {n width: 100%;n background: none;n border: none;n text-align: left;n padding: 15px 0;n font-size: 1.1rem;n font-weight: 600;n cursor: pointer;n display: flex;n justify-content: space-between;n align-items: center;n color: var(u002du002ddark-text);n }nn .accordion-header:hover {n color: var(u002du002ddivi-purple);n }nn .accordion-icon {n transition: transform 0.3s ease;n }nn .accordion-header.active .accordion-icon {n transform: rotate(45deg);n color: var(u002du002ddivi-purple);n }nn .accordion-body {n max-height: 0;n overflow: hidden;n transition: max-height 0.3s ease-out;n padding-left: 10px;n border-left: 3px solid var(u002du002ddivi-purple);n margin-left: 5px;n }nn .accordion-body p {n margin: 15px 0;n color: #555;n }nn .step-list {n list-style: none;n padding: 0;n margin: 0;n }nn .step-list li {n margin-bottom: 12px;n position: relative;n padding-left: 25px;n }nn .step-list li::before {n content: u0022✓u0022;n color: var(u002du002ddivi-green);n font-weight: bold;n position: absolute;n left: 0;n }nn /* u002du002d- CARDS (For Resources) u002du002d- */n .resource-grid {n display: grid;n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));n gap: 20px;n }nn .card {n background: var(u002du002dwhite);n border: 1px solid #eee;n border-radius: 8px;n padding: 25px;n text-align: center;n transition: transform 0.3s, box-shadow 0.3s;n text-decoration: none;n color: inherit;n display: block;n }nn .card:hover {n transform: translateY(-5px);n box-shadow: 0 10px 20px rgba(108, 46, 185, 0.15);n border-color: var(u002du002ddivi-purple);n }nn .card-icon {n font-size: 2rem;n margin-bottom: 15px;n display: block;n }nn .card h3 {n margin: 0 0 10px 0;n font-size: 1.1rem;n }nn .card span {n font-size: 0.9rem;n color: #666;n }nn @keyframes fadeIn {n from { opacity: 0; transform: translateY(5px); }n to { opacity: 1; transform: translateY(0); }n }nn /* Divi color helpers */n .color-blue { color: var(u002du002ddivi-blue); font-weight: bold; }n .color-green { color: var(u002du002ddivi-green); font-weight: bold; }n .color-gray { color: #888; font-weight: bold; }nn u003c/styleu003enu003c/headu003enu003cbodyu003ennu003cdiv class=u0022containeru0022u003en u003ch1u003eEditing Your Websiteu003c/h1u003en n u003cdiv style=u0022text-align: center; max-width: 700px; margin: 0 auto 50px auto; color: #555; line-height: 1.8;u0022u003en u003cpu003eAt u003cstrongu003eFar Side Consultingu003c/strongu003e, we use the u003cstrongu003eDivi Builderu003c/strongu003e because it is very flexible and relatively easy to use.u003c/pu003en u003cpu003eUse this guide to handle basic updates. If you have any questions or run into trouble, please reach out to us at u003ca href=u0022mailto:team@hellofarside.comu0022 style=u0022color: var(u002du002ddivi-purple); font-weight: bold; text-decoration: none;u0022u003eteam@hellofarside.comu003c/au003e.u003c/pu003en u003c/divu003enn u003c!u002du002d SECTION 1: GETTING STARTED u002du002du003en u003cdiv class=u0022guide-sectionu0022u003en u003ch2 class=u0022guide-titleu0022u003e1. Getting Startedu003c/h2u003en u003cpu003eThe easiest way to edit a specific page is to navigate to it first.u003c/pu003en u003cul class=u0022step-listu0022u003en u003cliu003eu003cstrongu003eStep 1:u003c/strongu003e Go to u003ccodeu003eyourwebsite.com/wp-adminu003c/codeu003e and log in with your credentials.u003c/liu003en u003cliu003eu003cstrongu003eStep 2:u003c/strongu003e Once logged in, visit your website's homepage and navigate to the specific page you want to edit.u003c/liu003en u003cliu003eu003cstrongu003eStep 3:u003c/strongu003e Look for the black toolbar at the very top of the screen and click u003cstrongu003eu0022Enable Visual Builderu0022u003c/strongu003e.u003c/liu003en u003c/ulu003en u003c/divu003enn u003c!u002du002d SECTION 2: INTERACTIVE TABS u002du002du003en u003cdiv class=u0022guide-sectionu0022u003en u003ch2 class=u0022guide-titleu0022u003e2. Understanding the Interfaceu003c/h2u003en n u003cdiv class=u0022tabs-navu0022u003en u003cbutton class=u0022tab-btn activeu0022 onclick=u0022openTab(event, 'tab1')u0022u003eThe Color Systemu003c/buttonu003en u003cbutton class=u0022tab-btnu0022 onclick=u0022openTab(event, 'tab2')u0022u003eThe Settings Panelu003c/buttonu003en u003cbutton class=u0022tab-btnu0022 onclick=u0022openTab(event, 'tab3')u0022u003eHow to Saveu003c/buttonu003en u003cbutton class=u0022tab-btnu0022 onclick=u0022openTab(event, 'tab4')u0022u003eMobile u0026 Undou003c/buttonu003en u003c/divu003enn u003cdiv id=u0022tab1u0022 class=u0022tab-content activeu0022u003en u003ch3u003eStructure: Blue u003e Green u003e Grayu003c/h3u003en u003cpu003eEvery Divi page is built using boxes inside of boxes. Look for the colored border when you hover over an item:u003c/pu003en u003culu003en u003cliu003eu003cspan class=u0022color-blueu0022u003eBlue (Section):u003c/spanu003e The main background container. Use this to separate large areas of your page.u003c/liu003en u003cliu003eu003cspan class=u0022color-greenu0022u003eGreen (Row):u003c/spanu003e Lives inside the Blue Section. This controls your columns (e.g., text on the left, image on the right).u003c/liu003en u003cliu003eu003cspan class=u0022color-grayu0022u003eGray (Module):u003c/spanu003e The actual content. This is your Text, Button, or Image.u003c/liu003en u003c/ulu003en u003c/divu003enn u003cdiv id=u0022tab2u0022 class=u0022tab-contentu0022u003en u003ch3u003eWhere are the settings?u003c/h3u003en u003cpu003eTo change fonts, colors, or sizes, you use the u003cstrongu003eSettings Panelu003c/strongu003e.u003c/pu003en u003culu003en u003cliu003eu003cstrongu003eOpen Settings:u003c/strongu003e Hover over any element and click the u003cstrongu003eGear Icon (⚙️)u003c/strongu003e.u003c/liu003en u003cliu003eu003cstrongu003eThe Panel:u003c/strongu003e A sidebar will appear (usually on the right). This contains all options for that element.u003c/liu003en u003cliu003eu003cstrongu003eDesign Tab:u003c/strongu003e Inside the panel, click the word u003cstrongu003eu0022Designu0022u003c/strongu003e at the top to find options for Fonts, Colors, and Spacing.u003c/liu003en u003c/ulu003en u003c/divu003enn u003cdiv id=u0022tab3u0022 class=u0022tab-contentu0022u003en u003ch3u003eSaving your worku003c/h3u003en u003cpu003eDivi 5 saves your specific module edits instantly, but you must still save the page.u003c/pu003en u003culu003en u003cliu003eu003cstrongu003eModule Edits:u003c/strongu003e When you finish editing a text block or image, just click the u003cstrongu003eXu003c/strongu003e at the top of the settings panel. It is already saved.u003c/liu003en u003cliu003eu003cstrongu003ePublishing the Page:u003c/strongu003e To make changes visible to the public, click the purple u003cstrongu003e( ... )u003c/strongu003e button at the bottom center of the screen, then click the green u003cstrongu003eu0022Saveu0022u003c/strongu003e or u003cstrongu003eu0022Publishu0022u003c/strongu003e button on the bottom right.u003c/liu003en u003c/ulu003en u003c/divu003enn u003cdiv id=u0022tab4u0022 class=u0022tab-contentu0022u003en u003ch3u003eSafety Netsu003c/h3u003en u003cpu003eMistakes happen! Here is how to fix them and check your work.u003c/pu003en u003culu003en u003cliu003eu003cstrongu003eUndo:u003c/strongu003e Pressed the wrong key? Just hit u003ccodeu003eCtrl + Zu003c/codeu003e (Windows) or u003ccodeu003eCmd + Zu003c/codeu003e (Mac) to undo your last action.u003c/liu003en u003cliu003eu003cstrongu003eHistory Clock:u003c/strongu003e Click the purple u003cstrongu003e( ... )u003c/strongu003e button at the bottom, then the u003cstrongu003eClock Iconu003c/strongu003e to browse your editing history.u003c/liu003en u003cliu003eu003cstrongu003eMobile View:u003c/strongu003e Click the u003cstrongu003ePhone Iconu003c/strongu003e at the bottom left of the screen to preview how your site looks on a smartphone.u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003enn u003c!u002du002d SECTION 3: ACCORDION u002du002du003en u003cdiv class=u0022guide-sectionu0022u003en u003ch2 class=u0022guide-titleu0022u003e3. How Do I...? (Step-by-Step)u003c/h2u003en u003cpu003eClick a task below to see the steps.u003c/pu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Edit Existing Textn u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cul class=u0022step-listu0022u003en u003cliu003eu003cstrongu003eMethod 1 (Fast):u003c/strongu003e Simply click directly on the text on the screen and start typing.u003c/liu003en u003cliu003eu003cstrongu003eMethod 2 (Detailed):u003c/strongu003e Hover over the text block and click the u003cstrongu003eGray Gear Icon (⚙️)u003c/strongu003e.u003c/liu003en u003cliu003eIn the panel that opens, edit the text in the u0022Bodyu0022 box.u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Styling: Fonts, Colors u0026 Global Colorsn u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cul class=u0022step-listu0022u003en u003cliu003eu003cstrongu003eAccess:u003c/strongu003e Click the Gear icon on any module and switch to the u003cstrongu003eDesign Tabu003c/strongu003e.u003c/liu003en u003cliu003eu003cstrongu003eFonts:u003c/strongu003e Open the u0022Textu0022 or u0022Heading Textu0022 section to change font family, weight, and style.u003c/liu003en u003cliu003eu003cstrongu003eColors:u003c/strongu003e Click any paint dropper icon to pick a color.u003c/liu003en u003cliu003eu003cstrongu003eGlobal Colors:u003c/strongu003e When choosing a color, click the u0022Globalu0022 tab and hit the u003cstrongu003e(+)u003c/strongu003e to save it. Changing this color later will update it everywhere on the site instantly!u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Styling: Sizing u0026 Spacingn u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cul class=u0022step-listu0022u003en u003cliu003eu003cstrongu003eSizing:u003c/strongu003e Go to u003cstrongu003eDesign u003e Sizingu003c/strongu003e. Use the u0022Widthu0022 or u0022Max Widthu0022 sliders to control how large an image or text block appears.u003c/liu003en u003cliu003eu003cstrongu003eSpacing:u003c/strongu003e Go to u003cstrongu003eDesign u003e Spacingu003c/strongu003e to control the empty space around items.u003c/liu003en u003cliu003eu003cstrongu003eMargin:u003c/strongu003e Adds space u003cemu003eoutsideu003c/emu003e the box (pushes other elements away).u003c/liu003en u003cliu003eu003cstrongu003ePadding:u003c/strongu003e Adds space u003cemu003einsideu003c/emu003e the box (gives the content breathing room).u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Add a New Imagen u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cul class=u0022step-listu0022u003en u003cliu003eFind the area where you want the image.u003c/liu003en u003cliu003eClick the u003cstrongu003eGray Plus (+) Buttonu003c/strongu003e to add a module.u003c/liu003en u003cliu003eSelect u003cstrongu003eu0022Imageu0022u003c/strongu003e from the list.u003c/liu003en u003cliu003eIn the settings panel, click the placeholder image box.u003c/liu003en u003cliu003eUpload your file or select one from the Media Library.u003c/liu003en u003cliu003eClick u003cstrongu003eu0022Selectu0022u003c/strongu003e to finish.u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Rows u0026 Columns (Layouts)n u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cul class=u0022step-listu0022u003en u003cliu003eu003cstrongu003eAdd a Row:u003c/strongu003e Click the u003cstrongu003eGreen (+) Plus Buttonu003c/strongu003e inside any Blue Section.u003c/liu003en u003cliu003eu003cstrongu003eChoose Structure:u003c/strongu003e Select a layout (e.g., 2 columns, 3 columns) from the menu that pops up.u003c/liu003en u003cliu003eu003cstrongu003eEdit Settings:u003c/strongu003e Click the u003cstrongu003eGreen Gear Iconu003c/strongu003e on the row to change spacing or background colors.u003c/liu003en u003cliu003eu003cstrongu003eChange Columns:u003c/strongu003e To change a row from 2 columns to 3, click the u003cstrongu003eColumn Structure Iconu003c/strongu003e (grid shape) in the row's green toolbar.u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Create a Blog Postn u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cul class=u0022step-listu0022u003en u003cliu003eGo to your main WordPress Dashboard (not the visual builder).u003c/liu003en u003cliu003eClick u003cstrongu003ePosts u003e Add Newu003c/strongu003e in the left sidebar.u003c/liu003en u003cliu003eGive your post a Title.u003c/liu003en u003cliu003eClick the purple button that says u003cstrongu003eu0022Use Divi Builderu0022u003c/strongu003e.u003c/liu003en u003cliu003eSelect u003cstrongu003eu0022Build From Scratchu0022u003c/strongu003e.u003c/liu003en u003cliu003eInsert a u003cstrongu003eText Moduleu003c/strongu003e to write your article content.u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Add a Buttonn u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cul class=u0022step-listu0022u003en u003cliu003eClick the u003cstrongu003eGray Plus (+) Buttonu003c/strongu003e where you want the button.u003c/liu003en u003cliu003eSelect u003cstrongu003eu0022Buttonu0022u003c/strongu003e from the list.u003c/liu003en u003cliu003eIn the settings panel, type your button label (e.g., u0022Contact Usu0022) in the u003cstrongu003eTextu003c/strongu003e field.u003c/liu003en u003cliu003eClick u003cstrongu003eLinku003c/strongu003e in the settings panel to add the URL where the button should go.u003c/liu003en u003cliu003e(Optional) Go to the u003cstrongu003eDesignu003c/strongu003e tab and toggle u0022Use Custom Stylesu0022 to change the button color.u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003en u003c/divu003enn u003c!u002du002d SECTION 4: WORDPRESS MAINTENANCE u002du002du003en u003cdiv class=u0022guide-sectionu0022u003en u003ch2 class=u0022guide-titleu0022u003e4. General WordPress Maintenanceu003c/h2u003en u003cpu003eBeyond the visual designs, keeping WordPress healthy is important. Here is how to handle updates and basic admin tasks.u003c/pu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Updating Plugins u0026 Themesn u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cpu003eu003cstrongu003eNote:u003c/strongu003e We recommend taking a backup (or asking us) before running major updates.u003c/pu003en u003cul class=u0022step-listu0022u003en u003cliu003eLog in to the Dashboard.u003c/liu003en u003cliu003eLook for the u003cstrongu003eDashboard u003e Updatesu003c/strongu003e menu item on the top left.u003c/liu003en u003cliu003eIf you see a red number, updates are available.u003c/liu003en u003cliu003eSelect the plugins you want to update and click u003cstrongu003eu0022Update Pluginsu0022u003c/strongu003e.u003c/liu003en u003cliu003eWait for the process to finish before navigating away.u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003enn u003cdiv class=u0022accordion-itemu0022u003en u003cbutton class=u0022accordion-headeru0022 onclick=u0022toggleAccordion(this)u0022u003en Pages vs. Postsn u003cspan class=u0022accordion-iconu0022u003e+u003c/spanu003en u003c/buttonu003en u003cdiv class=u0022accordion-bodyu0022u003en u003cul class=u0022step-listu0022u003en u003cliu003eu003cstrongu003ePages:u003c/strongu003e Use these for timeless content like u0022About Us,u0022 u0022Services,u0022 or u0022Contact.u0022 They have a hierarchy (parent/child pages).u003c/liu003en u003cliu003eu003cstrongu003ePosts:u003c/strongu003e Use these for news, blogs, or time-sensitive updates. They are organized by Categories and Tags and appear in your blog feed.u003c/liu003en u003c/ulu003en u003c/divu003en u003c/divu003en u003c/divu003enn u003c!u002du002d SECTION 5: HOVER CARDS u002du002du003en u003cdiv class=u0022guide-sectionu0022 style=u0022background: transparent; box-shadow: none; padding: 0;u0022u003en u003ch2 class=u0022guide-titleu0022 style=u0022border-bottom: none;u0022u003e5. Helpful Resourcesu003c/h2u003en u003cdiv class=u0022resource-gridu0022u003en u003ca href=u0022https://www.elegantthemes.com/blog/u0022 target=u0022_blanku0022 class=u0022cardu0022u003en u003cspan class=u0022card-iconu0022u003e📚u003c/spanu003en u003ch3u003eDivi Documentationu003c/h3u003en u003cspanu003eFull manual for advanced settingsu003c/spanu003en u003c/au003en u003ca href=u0022https://demo.elegantthemes.com/u0022 target=u0022_blanku0022 class=u0022cardu0022u003en u003cspan class=u0022card-iconu0022u003e⚡u003c/spanu003en u003ch3u003ePractice Zoneu003c/h3u003en u003cspanu003eTry editing on the official demo siteu003c/spanu003en u003c/au003en u003ca href=u0022https://wordpress.org/documentation/u0022 target=u0022_blanku0022 class=u0022cardu0022u003en u003cspan class=u0022card-iconu0022u003e⚙️u003c/spanu003en u003ch3u003eWordPress Basicsu003c/h3u003en u003cspanu003eLearn about Pages vs. Postsu003c/spanu003en u003c/au003en u003c/divu003en u003c/divu003ennu003c/divu003ennu003cscriptu003en // Tab Logicn function openTab(evt, tabName) {n var i, tabcontent, tablinks;n n // Hide all tab contentn tabcontent = document.getElementsByClassName(u0022tab-contentu0022);n for (i = 0; i u003c tabcontent.length; i++) {n tabcontent[i].style.display = u0022noneu0022;n tabcontent[i].classList.remove(u0022activeu0022);n }nn // Remove active class from buttonsn tablinks = document.getElementsByClassName(u0022tab-btnu0022);n for (i = 0; i u003c tablinks.length; i++) {n tablinks[i].className = tablinks[i].className.replace(u0022 activeu0022, u0022u0022);n }nn // Show current tab and add active classn document.getElementById(tabName).style.display = u0022blocku0022;n document.getElementById(tabName).classList.add(u0022activeu0022);n evt.currentTarget.className += u0022 activeu0022;n }nn // Accordion Logicn function toggleAccordion(element) {n element.classList.toggle(u0022activeu0022);n var panel = element.nextElementSibling;n var icon = element.querySelector(u0022.accordion-iconu0022);nn if (panel.style.maxHeight) {n panel.style.maxHeight = null;n } else {n panel.style.maxHeight = panel.scrollHeight + u0022pxu0022;n }n }nu003c/scriptu003ennu003c/bodyu003enu003c/htmlu003e