CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en"> <head> <script type="text/css"> @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400; url("https://www.sigsiu.net/templates/sigsiunet/fonts/mulish-v1-latin-ext_latin-regular.woff2") format('woff2'), /* Super Modern Browsers */ url("https://www.sigsiu.net/templates/sigsiunet/fonts/mulish-v1-latin-ext_latin-regular.woff") format('woff'), /* Modern Browsers */ url("https://www.sigsiu.net/templates/sigsiunet/fonts/mulish-v1-latin-ext_latin-regular.ttf") format('truetype'); /* Safari, Android, iOS */ } </script> <script src="/templates/sigsiunet/js/template.js.php" type="text/javascript"></script> <link rel="stylesheet" href="https://www.sigsiu.net/templates/sigsiunet/css/template.css.php?3" type="text/css" media="screen"/> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="applications, downloads, manuals, information, Joomla, SobiPro, SobiPro, directory, multi-content" /> <meta name="rights" content="Sigsiu.NET GmbH" /> <meta name="author" content="Sigrid Suski" /> <meta name="robots" content="index, follow" /> <meta name="description" content="Manuals and applications in the SobiPro Information Center.SobiPro is the best multi-content component for Joomla powered websites and Sigsiu.NET GmbH is the company behind SobiPro." /> <meta name="generator" content="Sigsiu.NET SobiPro" /> <title>Useful Template Snippets - SobiPro Templates & Design - Information Center</title> <link href="/templates/sigsiunet/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link href="https://fonts.googleapis.com/css?family=Mulish" rel="stylesheet" type="text/css" />  <script type="text/javascript">/* <![CDATA[*/ var SobiProUrl = 'https://www.sigsiu.net/index.php?option=com_sobipro&task=%task%'; var SobiProSection = 1; var SPLiveSite = 'https://www.sigsiu.net/'; /*]]>*/ </script> <link href="https://www.sigsiu.net/center/templates-design/useful-template-snippets" rel="canonical" /> <link href="/center/view,rss.section" rel="alternate" type="application/atom+xml" title="Information Center" /> <link href="/center/templates-design/useful-template-snippets/view,rss.category" rel="alternate" type="application/atom+xml" title="Useful Template Snippets" /> <link rel="stylesheet" href="https://www.sigsiu.net/components/com_sobipro/var/css/8b260aec3d143d8a4fcf3b2fc5ad4704.css" media="all" type="text/css" /> <script type="text/javascript" src="https://www.sigsiu.net/components/com_sobipro/var/js/dbf0bd5b16bf20c0199d71416256ba51.js"></script> <meta content="https://www.sigsiu.net/images/GlobalSobiProImage.png" property="og:image"/> <meta content="Useful Template Snippets" property="og:image:alt"/> <meta content="https://www.sigsiu.net/center/templates-design/useful-template-snippets" property="og:url"/> <meta content="article" property="og:type"/> <meta content="Useful Template Snippets" property="og:title"/> <meta content="1 January 1970" property="og:updated_time"/> <meta content="This section is a bag of tricks. We provide here several useful XSL and PHP code snippets for the SobiPro templates and also some tutorials or how-to's you may find handy." property="og:description"/> <script type="text/javascript" src="/index.php?option=com_sobipro&task=txt.js&format=json"></script>  <meta name="viewport" content="width=device-width, initial-scale=1">      <meta name="p:domain_verify" content="53d356a960f03c08627d7d6bb163463a"/> <meta name="google-site-verification" content="lxctBOlH06dcYzwdmcSy3ADuAXt-1fJf2h-it05CDz4" /> </head> <body id="main" class=" center useful-template-snippets com_sobipro view- itemid-351 loggedout no-rtl"> <div class="wrapper" id="page">  <header> <nav class="navbar navbar-fixed-top nav-custom" id="nav"> <div class="container"> <div class="navbar-header"> <a href="#sidebar"> <div class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </div> </a> <div class="navbar-brand "> <div class="module"> <div class="module-content"> <div class="custom" > <a href="https://www.sigsiu.net"><img src="/images/SobiProLogo.png" alt="SobiPro - best directory component for Joomla" /></a> </div> </div> </div> </div> </div> <div class="navbar-collapse collapse navbar-right"> <ul class="fa-ul nav menu nav navbar-nav navbar-nav"> <li class="item-138"><a href="/">Home</a></li><li class="item-119 active deeper parent dropdown"><a href="/center">Information Center <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-321"><a title="Description and purpose of SobiPro directory component and the possibility to download SobiPro." href="/center/sobipro-component"><img src="/images/SobiPro_Symbol_32.png" alt="SobiPro Component" /><span class="image-title">SobiPro Component</span> </a></li><li class="item-324 divider"> <span class="separator">sep</span> </li><li class="item-120"><a class="icon-fa-search" href="/center/search"> <i class="fa fa-search"></i> Search</a></li><li class="item-325 divider"> <span class="separator">sep (2)</span> </li><li class="item-121"><a href="/center/getting-started">Getting Started</a></li><li class="item-122"><a href="/center/installation-update">Installation, Update</a></li><li class="item-338"><a href="/center/fields-in-sobipro">Fields in SobiPro Core</a></li><li class="item-340"><a href="/center/section-configuration">Setting up a directory (section)</a></li><li class="item-124"><a href="/center/entries-and-categories">Entries and Categories</a></li><li class="item-335"><a href="/center/sobipro-search">SobiPro's Search</a></li><li class="item-125 active deeper parent dropdown dropdown-submenu"><a href="/center/templates-design">Templates & Design <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-298"><a href="/center/templates-design/sobipro-templates">Theme Templates</a></li><li class="item-617"><a href="/center/templates-design/technique-templates">Technique Templates</a></li><li class="item-350"><a href="/center/templates-design/xml-data-nodes">XML Data Nodes</a></li><li class="item-351 current active"><a href="/center/templates-design/useful-template-snippets">Useful Template Snippets</a></li></ul></li><li class="item-126"><a href="/center/applications">Applications</a></li><li class="item-123 deeper parent dropdown dropdown-submenu"><a href="/center/global-system-settings">Global Settings and Functions <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-346"><a href="/center/global-system-settings/system-settings">System Settings</a></li><li class="item-347"><a href="/center/global-system-settings/access-control-list">Access Control List</a></li><li class="item-348"><a href="/center/global-system-settings/application-manager">Application Manager</a></li><li class="item-349"><a href="/center/global-system-settings/template-manager">Template Manager</a></li></ul></li><li class="item-318"><a href="/center/languages">Languages/Translations</a></li></ul></li><li class="item-329 deeper parent dropdown"><a href="/support">Support <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-209"><a href="/support/support-for-members">Ticket System for Subscribers</a></li><li class="item-328"><a href="/support/community-area">Community Area</a></li><li class="item-521"><a href="/my-club/my-subscriptions/subscriptions">My Subscriptions</a></li></ul></li><li class="item-168 deeper parent dropdown"><a class="icon-fa-shopping-cart" href="/subscribe/levels"> <i class="fa fa-shopping-cart"></i> Subscribe <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-214"><a class="icon-fa-shopping-cart" href="/subscribe/subscription/levels"> <i class="fa fa-shopping-cart"></i> Subscribe</a></li><li class="item-173"><a class="icon-fa-sign-in" href="/subscribe/login"> <i class="fa fa-sign-in"></i> Login</a></li></ul></li></ul> </div> </div> </nav> </header>  <div id="strapline"> <div class="container"> <div class="animated fadeInUp"> <div class="module"> <div class="module-content"> <div class="custom" > <div class="row strapline"> <div class="col-sm-3 s-image"> <img src="/images/straplines/center.png" alt=""/> </div> <div class="col-sm-9"> <h1><a href="/center">Information Center</a> <button class="btn btn-xs btn-inverse btn-info" type="button" data-toggle="collapse" data-target=".all" aria-expanded="true" aria-controls="description"> <i class="fa fa-eye"></i> </button> </h1> <p class="head collapse all in" id="description">In the Information Center you will find everything you need to know about SobiPro and its applications! <br/> It is also the place to download SobiPro, its applications and language packages. <button class="btn btn-xs btn-inverse btn-info" type="button" data-toggle="collapse" data-target="#download" aria-expanded="false" aria-controls="download"> <i class="fa fa-folder-open"></i> </button> </p> </div> </div> <div class="row strapline all collapse" id="download"> <div class="col-sm-4 s-download"> <h3>Applications</h3> <p>Enhance your directories! <br> Get additional functionality for SobiPro with our applications. </p> <p> <a href="/center/applications"><i class="fa fa-arrow-right"></i> Get Applications</a> </p> </div> <div class="col-sm-4 s-download"> <h3>Templates</h3> <p>Design your directories! <br> Check out the different SobiPro templates we have created for you. </p> <p> <a href="/center/templates-design/sobipro-templates"><i class="fa fa-arrow-right"></i> Get SobiPro Templates</a> </p> </div> <div class="col-sm-4 s-download"> <h3>Languages</h3> <p>Let your directories speak your language! <br> SobiPro is translated into more than 30 languages. </p> <p> <a href="/center/languages"><i class="fa fa-arrow-right"></i> Get your Language package</a> </p> </div> </div></div> </div> </div> </div> </div> </div> <section class="top"> <div class="container"> <div class="module"> <div class="module-content"> <div class="custom" > <div class="announce-image"><img src="/images/stories/announcement.png" alt="Important announcement" /></div> <div class="announce-text"> <br /> SobiPro 2.6.2 is available! <p class="details">  As an active customer download the full version of SobiPro from the <a href="/center/sobipro-component">description page</a> or download the <a href="/center/sobipro-component/2837-sobipro-trial-version">trial version</a> of SobiPro free of charge.</p> </div></div> </div> </div> </div> </section> <div class="middlearea"> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="content-wrapper"> <div id="content-area"> <div id="system-message-container"> </div>  <div id="SobiPro" class="SobiPro documentation" data-template="documentation"> <div class="jumpdocs"><span> Quick jump to chapter: </span> <div class="moduletablecs"> <div class="SobiPro documentation module"><div class="ctrl-sobi-csmod cs form-inline cs" data-mid="148:1:36:0" ><div class="ctrl-cselect-go hide btn btn-default"><i class="fa fa-arrow-right" ></i></div></div></div><div class="clearfix"></div> </div> </div><div class="spListing category"><div class="row"><div class="col-md-12"><h2>Useful Template Snippets</h2><div class="spCategoryDesc" data-role="content"><div class="area5 spContent"></div>This section is a bag of tricks. We provide here several useful XSL and PHP code snippets for the SobiPro templates and also some tutorials or how-to's you may find handy.</div></div></div><div class="row"><div class="col-md-12"><div class="spScreenshots"></div></div></div><div class="row"><div class="col-md-12"><div class="area1" data-role="content"></div></div></div><div class="row"><div class="col-md-12"><div class="spEntryContainer"><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/3211-vimeo-video">Vimeo video</a></h4><div class="spClassViewInbox"><span>Add a Vimeo video to you details view .</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,details-view">details view</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,template">template</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,video">video</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/172-bootstrap-carousel-slideshow">Bootstrap's Carousel Slideshow</a></h4><div class="spClassViewInbox"><span>Add a slideshow to the details view template</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,bootstrap">Bootstrap</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,carousel">carousel</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,details-view">details view</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,slide">slide</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem5"><a href="/center/list/tag/field_tags/in,slideshow">slideshow</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem6"><a href="/center/list/tag/field_tags/in,snippet">snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem7"><a href="/center/list/tag/field_tags/in,template">template</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/37-all-entries-of-author">All entries of an author</a></h4><div class="spClassViewInbox"><span>A code snippet to show all entries of the author in details view</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,author">author</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,details-view">details view</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,template">template</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/132-format-date-and-time">Format Date and Time</a></h4><div class="spClassViewInbox"><span>Change the output of the date and time format</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,date">date</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,format">format</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,php">PHP</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem5"><a href="/center/list/tag/field_tags/in,time">Time</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/144-use-xslt-condition-statements">Use XSLT condition statements (queries)</a></h4><div class="spClassViewInbox"><span>Some conditional XSL statements (queries) to use in SobiPro templates</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,condition">condition</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,conditional">conditional</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,details-view">details view</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,statement">statement</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem5"><a href="/center/list/tag/field_tags/in,vcard">vCard</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem6"><a href="/center/list/tag/field_tags/in,xsl">XSL</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/150-create-a-print-button-in-details-view">Create a print button in details view</a></h4><div class="spClassViewInbox"><span>Easy tutorial about "How to create a print button for an entry"</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,button">button</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,details-view">details view</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,print">print</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/163-add-google-recaptcha-to-the-entry-form">Add Google reCAPTCHA to the entry form</a></h4><div class="spClassViewInbox"><span>A small guide to add Google reCAPTCHA to the entry form of SobiPro</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,captcha">captcha</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,edit-entry">edit entry</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,entry-form">entry form</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,google-recaptcha">Google reCAPTCHA</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/340-add-terms-agreement-to-the-entry-form">Add terms agreement to the entry form</a></h4><div class="spClassViewInbox"><span>A template snippet to add an agree to terms check-box to the entry form</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,agree">agree</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,check-box">check box</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,entry-form">entry form</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,terms">terms</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/567-show-an-image-with-a-link-in-the-template">Show an image with a link in the template</a></h4><div class="spClassViewInbox"><span>This code snippet shows how to add an image to a link</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,image">image</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,link">link</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,template">template</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem5"><a href="/center/list/tag/field_tags/in,xsl">XSL</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/22-display-checkbox-group-or-multi-select-list-in-one-line">Display checkbox group or multi select list in one line</a></h4><div class="spClassViewInbox"><span>Display a checkbox group or a multi select list in one line separated by a comma</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,comma">comma</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,css">CSS</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/290-create-a-simple-search-module">Create a simple search module</a></h4><div class="spClassViewInbox"><span>A code snippet to create a simple search module</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,custom">custom</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,module">module</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,search">search</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/279-base-fee-for-an-entry">Base fee for an entry</a></h4><div class="spClassViewInbox"><span>Charge for the whole entry or a base fee</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,base-fee">base fee</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,charge">charge</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,fee">fee</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/252-maps-in-hidden-containers">Maps in hidden containers</a></h4><div class="spClassViewInbox"><span>How to get maps working with tabs (jQuery, Bootstrap) or other collapsable elements</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem2"><a href="/center/list/tag/field_tags/in,collapsable">collapsable</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem3"><a href="/center/list/tag/field_tags/in,details-view">details view</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem4"><a href="/center/list/tag/field_tags/in,geomap">GeoMap</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem5"><a href="/center/list/tag/field_tags/in,hint">hint</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem6"><a href="/center/list/tag/field_tags/in,map">map</a></span><span class="spClassAggregation tagSeparator"> | </span><span class="spClassAggregation tagItem7"><a href="/center/list/tag/field_tags/in,tab">tab</a></span></span></div></div><div class=""><h4><span class="spPublicState"><span class="badge badge-subscription">S</span></span><a href="/center/templates-design/useful-template-snippets/194-create-dependant-select-list-fields">Create dependant select list fields</a></h4><div class="spClassViewInbox"><span>How to create dependant select list fields without the built-in dependancy list function</span></div><div class="spClassViewAggregation"><span class="spLabel">Tags: </span><span class="spClassAggregation"><span class="spClassAggregation tagItem1"><a href="/center/list/tag/field_tags/in,code-snippet">code snippet</a></span></span></div></div></div></div></div><div class="row"><div class="col-md-12"><div class="area3 spContent"></div></div></div><div class="row"><div class="col-md-12"><div class="area4 spContent"></div></div></div><div class="row"><div class="col-md-12"><div><p style="margin:0;"><span class="spPublicState"><span class="badge badge-subscription allowed">free</span><span class="badge badge-subscription allowed">S</span><span class="small text-grey">Document available for free or for subscribers. You have access.</span></span></p><p style="margin:0;"><span class="spPublicState"><span class="badge badge-subscription">S</span><span class="small text-grey">Document available for subscribers only. You do not have access.</span></span></p><div class="alert alert-primary alert-xs spCopyright"><p>Copyright (C) 2006-2025 Sigsiu.NET GmbH (https://www.sigsiu.net). All rights reserved.</p><p>This documentation and all images therein are copyrighted and protected by law. You may not publish, distribute or sell them, or parts of it, without explicit written permission of Sigsiu.NET GmbH. </p></div></div></div></div></div><input type="hidden" id="hidetext" value="Hide Categories" /><div class="modal fade" id="bigImage" role="dialog" aria-labelledby="bigImageLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button><h4 class="modal-title" id="big-title"></h4></div><div class="modal-body"><p><img src="/" alt="" id="big-src" /></p></div></div></div></div><input type="hidden" id="hidetext" value="Hide Categories" /> <div id="sobiProFooter">Powered by <a title="SobiPro - Joomla Directory Component with content construction support" href="https://www.sigsiu.net" target="_blank">SobiPro</a></div> </div>  <script type="text/javascript">SobiPro.Ready();</script> </div> </div> </div> <div class="col-md-3"> <section class="sidebar right-sidebar"> <div class="module"> <div class="module-content"> <div class="SobiPro banners ctrl-sobi-emod " data-mid="128:363:0:0:0"> <div class="relevantData"><p>Werbung/Advertisement</p><a href="https://my.rochen.com/?link=14158"><img src="https://www.sigsiu.net/images/sobipro/banner/img_premiumsharedjoomla250x250.png" class="spField" alt="Rochen Web Hosting" title="Rochen Web Hosting" /></a></div> </div> </div> </div> <div class="module -document"> <div class="headline"> <h4>User documentation</h4> </div> <div class="module-content"> <div class="SobiPro documentation ctrl-sobi-emod -document" data-mid="127:1:36:0:0"> <div class="spModule manual"><p class="title small text-mediumgrey">(recently updated or new documents)</p><ul class="fa-ul"><li><i class="fa-li fa fa-info-circle text-grey" data-toggle="tooltip" data-placement="top" title="Information"></i><a href="/center/sobipro-component/335-release-and-road-map-of-sobipro-and-its-applications" class="ctrl-emod-details" data-sid="335">Release and Road Map of SobiPro and its Applications</a></li><li><i class="fa-li fa fa-info-circle text-grey" data-toggle="tooltip" data-placement="top" title="Information"></i><a href="/center/sobipro-component/88-release-notes" class="ctrl-emod-details" data-sid="88">SobiPro Release Notes</a></li><li><i class="fa-li fa fa-info-circle text-grey" data-toggle="tooltip" data-placement="top" title="Information"></i><a href="/center/templates-design/useful-template-snippets/567-show-an-image-with-a-link-in-the-template" class="ctrl-emod-details" data-sid="567">Show an image with a link in the template</a></li><li><i class="fa-li fa fa-info-circle text-grey" data-toggle="tooltip" data-placement="top" title="Information"></i><a href="/center/templates-design/useful-template-snippets/3211-vimeo-video" class="ctrl-emod-details" data-sid="3211">Vimeo video</a></li><li><i class="fa-li fa fa-info-circle text-grey" data-toggle="tooltip" data-placement="top" title="Information"></i><a href="/center/sobipro-component/98-requirements" class="ctrl-emod-details" data-sid="98">Requirements</a></li><li><i class="fa-li fa fa-cog text-grey" data-toggle="tooltip" data-placement="top" title="Configuration"></i><a href="/adapt-old-template" class="ctrl-emod-details" data-sid="3171">Older template adaptions</a></li><li><i class="fa-li fa fa-cloud-download text-grey" data-toggle="tooltip" data-placement="top" title="Installation"></i><a href="/center/installation-update/89-update-sobipro-repository" class="ctrl-emod-details" data-sid="89">Update the SobiPro Repository</a></li><li><i class="fa-li fa fa-info-circle text-grey" data-toggle="tooltip" data-placement="top" title="Information"></i><a href="/center/sobipro-component/3061-upgrade-from-sobipro-1-to-sobipro-2" class="ctrl-emod-details" data-sid="3061">Upgrade from SobiPro 1 to SobiPro 2</a></li><li><i class="fa-li fa fa-info-circle text-grey" data-toggle="tooltip" data-placement="top" title="Information"></i><a href="/center/sobipro-component/209-difference-between-sobi-versions" class="ctrl-emod-details" data-sid="209">Difference between Sobi versions</a></li><li><i class="fa-li fa fa-info-circle text-grey" data-toggle="tooltip" data-placement="top" title="Information"></i><a href="/center/installation-update/236-sobipro-repository-certificate" class="ctrl-emod-details" data-sid="236">SobiPro Repository Certificate</a></li></ul><div class="ctrl-emod-navigation hide"></div></div> </div> </div> </div> <div class="module"> <div class="headline"> <h4>New & updated Templates</h4> </div> <div class="module-content"> <div class="SobiPro documentation ctrl-sobi-cmod " data-mid="142:1:36:0:0"> <div class="spModule download"><div class="row" ><div class="col-sm-12"><div class="package Template"><a href="/center/templates-design/sobipro-templates/1360-sobirestara-template" class="ctrl-emod-details" data-sid="1360"><div class="iconlabel"><p><i class="fa fa-3x fa-download"></i></p><p class="label updated">updated</p></div></a><div><p class="title"><a href="/center/templates-design/sobipro-templates/1360-sobirestara-template">SobiRestara Template</a></p><span class="spClassInbox field_application_description">Restaurants Guide Template for SobiPro</span></div></div></div></div><div class="row" ><div class="col-sm-12"><div class="package Template"><a href="/center/templates-design/sobipro-templates/16-sobicars-template" class="ctrl-emod-details" data-sid="16"><div class="iconlabel"><p><i class="fa fa-3x fa-download"></i></p><p class="label updated">updated</p></div></a><div><p class="title"><a href="/center/templates-design/sobipro-templates/16-sobicars-template">SobiCars Template</a></p><span class="spClassInbox field_application_description">Vehicles Market template for SobiPro</span></div></div></div></div><div class="row" ><div class="col-sm-12"><div class="package Template"><a href="/center/templates-design/technique-templates/30-sobisort-template" class="ctrl-emod-details" data-sid="30"><div class="iconlabel"><p><i class="fa fa-3x fa-download"></i></p><p class="label updated">updated</p></div></a><div><p class="title"><a href="/center/templates-design/technique-templates/30-sobisort-template">SobiSort Template</a></p><span class="spClassInbox field_application_description">Sortable table template for SobiPro</span></div></div></div></div><div class="row" ><div class="col-sm-12"><div class="package Template"><a href="/center/templates-design/technique-templates/20-sobipackages-template" class="ctrl-emod-details" data-sid="20"><div class="iconlabel"><p><i class="fa fa-3x fa-download"></i></p><p class="label updated">updated</p></div></a><div><p class="title"><a href="/center/templates-design/technique-templates/20-sobipackages-template">SobiPackages Template</a></p><span class="spClassInbox field_application_description">A SobiPro template to create different price packages</span></div></div></div></div></div><div class="ctrl-emod-navigation hide"></div> </div> </div> </div> </section> </div> </div> </div> </div> <div class="container"> <div class="pull-left"> <div class="module"> <div class="module-content"> <ul itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb"> <li class="active"> <span class="divider icon-location"></span> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="/" class="pathway"><span itemprop="name">Home</span></a> <span class="divider"> </span> <meta itemprop="position" content="1"> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="/center" class="pathway"><span itemprop="name">Information Center</span></a> <span class="divider"> </span> <meta itemprop="position" content="2"> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="/center/templates-design" class="pathway"><span itemprop="name">SobiPro Templates & Design</span></a> <span class="divider"> </span> <meta itemprop="position" content="3"> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active"> <span itemprop="name"> Useful Template Snippets </span> <meta itemprop="position" content="4"> </li> </ul> </div> </div> </div> </div> <footer> <div class="footer-1">  <div class="container"> <div class="row"> </div> </div>  </div> <div class="footer-2"> <div class="container"> <div class="row"> <div class="module"> <div class="module-content"> <div class="custom" >   <div class="col-sm-12 col-md-3"> <h4> Subscription </h4> <div class="btn-footer"><a href="/subscribe" class="btn btn-success btn-lg"><i class="fa fa-lg fa-shopping-cart"></i> Get a Subscription!</a></div> <div class="membership"> <div class="moduletable"> <ul class="fa-ul nav menufootermenu"> <li class="item-199"><a class="iconlist-fa-navicon" href="/subscription-plans"> <i class="fa fa-li fa-navicon"></i> Subscription Plans</a></li><li class="item-235"><a class="iconlist-fa-life-ring" href="/services"> <i class="fa fa-li fa-life-ring"></i> Services</a></li><li class="item-155"><a class="iconlist-fa-question-circle" href="/membership-faq"> <i class="fa fa-li fa-question-circle"></i> Do you have a question?</a></li><li class="item-210"><a class="iconlist-fa-envelope" href="/contact-us"> <i class="fa fa-li fa-envelope"></i> Contact us</a></li><li class="item-368"><a class="iconlist-fa-group" href="/team"> <i class="fa fa-li fa-group"></i> The SobiPro Team</a></li><li class="item-365"><a class="iconlist-fa-comment" href="/blog"> <i class="fa fa-li fa-comment"></i> Sobi Blog</a></li><li class="item-442"><a class="iconlist-fa-sign-in" href="/login-to-the-club"> <i class="fa fa-li fa-sign-in"></i> Login to the Club</a></li></ul> </div> </div> <div class="speciallinks"> <div class="moduletable"> <ul class="fa-ul nav menufootermenu"> <li class="item-339"><a class="iconlist-fa-lightbulb-o" title="Do you have an idea for a new feature? Add it here!" href="/idea-pool"> <i class="fa fa-li fa-lightbulb-o"></i> Idea Pool</a></li><li class="item-344"><a class="iconlist-fa-eye" title="A Showcase Directory for sites made with SobiPro" href="/showcase"> <i class="fa fa-li fa-eye"></i> Showcase</a></li><li class="item-262"><a class="iconlist-fa-download" title="Download older versions of SobiPro and its applications" href="/archive"> <i class="fa fa-li fa-download"></i> Download Archive</a></li></ul> </div> </div> <div class="social-icons"> <ul class="list-unstyled list-inline"> <li><a href="https://sobi.it/facebook/SobiPro" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a> </li> <li><a href="https://sobi.it/twitter/sobiclub" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a> </li> <li><a href="https://code.sigsiu.net/Sigsiu.NET/SobiPro" target="_blank"><i class="fa fa-github-square fa-3x"></i></a> </li> <li><a href="https://sobi.it/pinterest/SobiPro" target="_blank"><i class="fa fa-pinterest-square fa-3x"></i></a> </li> <li><a href="https://www.sigsiu.net/news/view,rss" target="_blank"><i class="fa fa-rss-square fa-3x"></i></a> </li> </ul> </div> </div>  <div class="col-sm-12 col-md-3 legalstuff"> <h4>Legal Stuff</h4> <ul class="fa-ul nav menufootermenu"> <li class="item-108"><a href="/imprint">Legal Notice (Impressum)</a></li><li class="item-109"><a href="/terms-of-service">Terms of Service (AGB)</a></li><li class="item-110"><a href="/data-protection-information">Data Privacy Statement (Datenschutzerkl盲rung)</a></li><li class="item-191"><a href="/cancellation-terms">Cancellation Terms (Widerrufsrecht)</a></li><li class="item-200"><a href="/customer-information">Customer Information (Kundeninformation)</a></li><li class="item-161"><a href="/licenses">Licenses</a></li><li class="item-341"><a href="/idea-submission-and-voting-rules">Idea Submission and Voting Rules</a></li><li class="item-345"><a href="/showcase-submission-and-discussion-terms">Showcase Submission and Discussion Terms</a></li><li class="item-388"><a href="/do-you-need-to-pay-vat">Do you need to pay VAT?</a></li></ul> </div>  <div class="col-sm-12 col-md-3 footernews"> <h4>Latest News</h4> <nav class="moduletable"> <div class="SobiPro news ctrl-sobi-emod " data-mid="124:379:0:0:0"> <ul class="nav menufootermenu"><li><a href="/news/3217-sobipro-2624" class="ctrl-emod-details" data-sid="3217">SobiPro 2.6.2 released</a></li><li><a href="/news/3214-review-and-rating-3300" class="ctrl-emod-details" data-sid="3214">Review and Rating 3.3 released</a></li><li><a href="/news/3210-category-select-module-2200" class="ctrl-emod-details" data-sid="3210">Category Select Module 2.2 released</a></li><li><a href="/news/3207-sobirestara-41" class="ctrl-emod-details" data-sid="3207">SobiRestara 4.1 released</a></li><li><a href="/news/3201-review-and-rating-3210" class="ctrl-emod-details" data-sid="3201">Review and Rating 3.2.1 released</a></li></ul> </div> </nav> <div class="btn-footer"><a href="/news" class="btn btn-primary">More News</a></div> <div class="moduletable"> <ul class="fa-ul nav menufootermenu"> <li class="item-147"><a href="https://code.sigsiu.net" class="iconlist-fa-bug"><i class="fa fa-li fa-bug"></i >Report a Bug</a></li><li class="item-146"><a class="iconlist-fa-building" href="/demo-site"> <i class="fa fa-li fa-building"></i> Demo Site</a></li><li class="item-332"><a class="iconlist-fa-home" href="/sobipro-hosting"> <i class="fa fa-li fa-home"></i> Recommended Hosting</a></li><li class="item-792"><a class="iconlist-fa-handshake-o" href="/translation-partnership"> <i class="fa fa-li fa-handshake-o"></i> Translation Partnership</a></li></ul> </div> </div>  <div class="col-sm-12 col-md-3 subscribe"> <div class="partners"> <div class="moduletable"> <div class="SobiPro banners ctrl-sobi-emod " data-mid="92:363:0:0:0"> <div class="relevantData"><p>Werbung/Advertisement</p><a href="https://my.rochen.com/?link=14158"><img src="https://www.sigsiu.net/images/sobipro/banner/img_rochenforsobipro.png" class="spField" alt="Hosting for SobiPro" title="Hosting for SobiPro" /></a></div> </div> </div> </div> <div class="clearfix"> </div> <div class="donate"> <p> Support the development of SobiPro with a <i class="fa fa-coffee fa-lg"></i> </p> <a href="http://sobi.it/Donate" class="btn btn-info"><i class="fa fa-paypal"></i> Buy a Coffee</a> <p class="distance-top-md"> <a href="https://community.joomla.org/service-providers-directory/listings/87-sigsiu-net-gmbh.html"> <img src="/images/badge-2-3.png" alt="Joomla Registered Provider"/> </a> </p> </div> </div> </div> </div> </div> </div> </div> </div> <div class="footer-3"> <p> <i class="fa fa-copyright"></i> 2006-2025 Sigsiu.NET GmbH. All rights reserved. </p> </div> </footer> <div id="sidebar"> <div id="panel-overview"> <ul class="fa-ul nav menu nav navbar-nav navbar-nav"> <li class="item-138"><a href="/">Home</a></li><li class="item-119 active deeper parent dropdown"><a href="/center">Information Center <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-321"><a title="Description and purpose of SobiPro directory component and the possibility to download SobiPro." href="/center/sobipro-component"><img src="/images/SobiPro_Symbol_32.png" alt="SobiPro Component" /><span class="image-title">SobiPro Component</span> </a></li><li class="item-324 divider"> <span class="separator">sep</span> </li><li class="item-120"><a class="icon-fa-search" href="/center/search"> <i class="fa fa-search"></i> Search</a></li><li class="item-325 divider"> <span class="separator">sep (2)</span> </li><li class="item-121"><a href="/center/getting-started">Getting Started</a></li><li class="item-122"><a href="/center/installation-update">Installation, Update</a></li><li class="item-338"><a href="/center/fields-in-sobipro">Fields in SobiPro Core</a></li><li class="item-340"><a href="/center/section-configuration">Setting up a directory (section)</a></li><li class="item-124"><a href="/center/entries-and-categories">Entries and Categories</a></li><li class="item-335"><a href="/center/sobipro-search">SobiPro's Search</a></li><li class="item-125 active deeper parent dropdown dropdown-submenu"><a href="/center/templates-design">Templates & Design <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-298"><a href="/center/templates-design/sobipro-templates">Theme Templates</a></li><li class="item-617"><a href="/center/templates-design/technique-templates">Technique Templates</a></li><li class="item-350"><a href="/center/templates-design/xml-data-nodes">XML Data Nodes</a></li><li class="item-351 current active"><a href="/center/templates-design/useful-template-snippets">Useful Template Snippets</a></li></ul></li><li class="item-126"><a href="/center/applications">Applications</a></li><li class="item-123 deeper parent dropdown dropdown-submenu"><a href="/center/global-system-settings">Global Settings and Functions <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-346"><a href="/center/global-system-settings/system-settings">System Settings</a></li><li class="item-347"><a href="/center/global-system-settings/access-control-list">Access Control List</a></li><li class="item-348"><a href="/center/global-system-settings/application-manager">Application Manager</a></li><li class="item-349"><a href="/center/global-system-settings/template-manager">Template Manager</a></li></ul></li><li class="item-318"><a href="/center/languages">Languages/Translations</a></li></ul></li><li class="item-329 deeper parent dropdown"><a href="/support">Support <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-209"><a href="/support/support-for-members">Ticket System for Subscribers</a></li><li class="item-328"><a href="/support/community-area">Community Area</a></li><li class="item-521"><a href="/my-club/my-subscriptions/subscriptions">My Subscriptions</a></li></ul></li><li class="item-168 deeper parent dropdown"><a class="icon-fa-shopping-cart" href="/subscribe/levels"> <i class="fa fa-shopping-cart"></i> Subscribe <span class="caret"></span></a><ul class="nav-child unstyled dropdown-menu"><li class="item-214"><a class="icon-fa-shopping-cart" href="/subscribe/subscription/levels"> <i class="fa fa-shopping-cart"></i> Subscribe</a></li><li class="item-173"><a class="icon-fa-sign-in" href="/subscribe/login"> <i class="fa fa-sign-in"></i> Login</a></li></ul></li></ul> </div> </div> </div> <a href="#" class="btn btn-danger btn-inverse go-top">to Top <i class="fa fa-lg fa-arrow-circle-up"></i></a> <script type="text/javascript"> jQuery( document ).ready( function () { jQuery( '.tooltip' ).tooltip( { html: true } ); } ); </script> <script type="text/javascript"> jQuery( function () { jQuery( 'div#sidebar' ).mmenu( { classes: 'mm-light', position: 'left', header: true, // counters: true, // extensions: '[fullscreen]' } ); } ); </script>  <script type="text/javascript"> var _paq = _paq || []; _paq.push( [ 'trackPageView' ] ); _paq.push( [ 'enableLinkTracking' ] ); (function () { var u = (("https:" == document.location.protocol) ? "https" : "http") + "://stats.sobi.pro/"; _paq.push( [ 'setTrackerUrl', u + 'piwik.php' ] ); _paq.push( [ 'setSiteId', 1 ] ); var d = document, g = d.createElement( 'script' ), s = d.getElementsByTagName( 'script' )[ 0 ]; g.type = 'text/javascript'; g.defer = true; g.async = true; g.src = u + 'piwik.js'; s.parentNode.insertBefore( g, s ); })(); </script> <noscript> <p> <img src="https://stats.sobi.pro/piwik.php?idsite=1" style="border:0;" alt=""/> </p> </noscript>  </body> </html>