Accordion menus

[diurno]

Hi guys,

 

I'm currently using the lof advance custom footer for my footer.

I was wondering if there is a way to somehow insert some accordion menus to each of the block, say after a certain width?

 

Domain: www.badgersett-historical.com

 

Thanks in advance guys.

[Jiten rash (away)]

as jquery is already added in prestashop add this at header.tpl

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

 

 

and

 

add this at footer.tpl

{literal}

 

<script>

 

$(function() {

 

$( "#accordion" ).accordion({

 

heightStyle: "content"

 

});

 

});

 

</script>

{/literal>

 

open lof advance footer/tmpl/default/default.tpl

<div style="clear:both"></div>

<div id="lofadvafooter{$pos}" class="lofadvafooter">

{foreach from=$lofpositions item=blocks key=key_pos}

<div id="lofadva-pos-{$key_pos + 1}" class="lof-position" style="width:100%">

<div class="lof-position-wrap">

{foreach from=$blocks item=block key=key_block}

<div class="lofadva-block-{$key_block + 1} lof-block" style="width:{$block.width}%; float:left;">

<div class="lof-block-wrap">

{if $block.show_title}

<h2>{$block.title}</h2>

{/if}

<ul class="lof-items">

{foreach from=$block.items item=item key=key_item}

{if $item.type == 'link'}

<li class="link"><a href="{$item.link_item}" title="{$item.title}" target="{$item.target}" {if $item.target == '_newwithout'}onclick='javascript: window.open("{$item.link_item}", "", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes"); return false;'{/if}>{if $item.show_title}{$item.title}{/if}</a></li>

{elseif $item.type == 'module'}

<li class="lof-module">

{if $item.show_title}<h2>{$item.title}</h2>{/if}

{$item.module}

</li>

{elseif $item.type == 'custom_html'}

<li class="lof-text">

{if $item.show_title}<h2>{$item.title}</h2>{/if}

{$item.text}

</li>

{elseif $item.type == 'gmap'}

<li class="lof-gmap">

{if $item.show_title}<h2>{$item.title}</h2>{/if}

{literal}

<script type="text/javascript">

function initialize() {

var myOptions = {

zoom: 8,

center: new google.maps.LatLng({/literal}{$item.latitude}, {$item.longitude}{literal}),

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("lofmap_canvas{/literal}{$item.id_loffc_block_item}{literal}"), myOptions);

}

function loadScript() {

var script = document.createElement("script");

script.type = "text/javascript";

script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCgnzQHpG4TAVJJAFgEp6u1arCQ3dlwVB8&sensor=true&callback=initialize";

document.body.appendChild(script);

}

window.onload = loadScript;

</script>

{/literal}

 

 

<div id="accordion">

 

<h3>Section 1</h3>

 

<div>

 

<p>u can place ur things here</p>

 

</div>

 

<h3>Section 2</h3>

 

<div>

 

<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>

 

</div>

 

<h3>Section 3</h3>

 

<div>

 

<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>

 

<ul>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

</ul>

 

</div>

 

</div>

 

<div id="lofmap_canvas{$item.id_loffc_block_item}" class="lofmap_canvas"></div>

</li>

{elseif $item.type == 'addthis'}

<li class="lof-addthis">

{if $item.show_title}<h2>{$item.title}</h2>{/if}

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

<a class="addthis_button_compact"></a>

<a class="addthis_counter addthis_bubble_style"></a>

</div>

{literal}

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fc893c046e9bd1b"></script>

{/literal}

</li>

{/if}

{/foreach}

</ul>

</div>

</div>

{/foreach}

<div style="clear:both;"></div>

</div>

</div>

{/foreach}

</div>

Edited August 16, 2013 by Jiten rash (see edit history)

[Jiten rash (away)]

omm wait we can have better ideas lof advance footer has rich text editor u can just go html and add

in this case u have to hide title and h3 will be ur title

and paragraph ur content

 

<div id="accordion">

 

<h3>example about us</h3>

 

<div>

 

<p>u can place ur things here</p>

 

</div>

Edited August 16, 2013 by Jiten rash (see edit history)

[diurno]

I've tried doing what you suggested but it doesn't seems to be working.

[Jiten rash (away)]

maybe ur doing something wrong it must work

[diurno]

Thanks for your help by the way, I really appreciate it.

 

I think I've followed your instructions properly.

 

You can see the changes in my test domain: www.badgersett-historical.com/test

 

Many thanks!

 

header.tpl

 

{*

* 2007-2013 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.or...ses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2013 PrestaShop SA

* @license http://opensource.or...ses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 lt-ie6 " lang="{$lang_iso}"> <![endif]-->

<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->

<!--[if IE 8]> <html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->

<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">

<meta charset="utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />

{/if}

{if isset($meta_keywords) AND $meta_keywords}

<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />

{/if}

<meta name="generator" content="PrestaShop" />

<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />

<meta name="author" content="Prestashop 1.5">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<script>

if (navigator.userAgent.match(/Android/i)) {

var viewport = document.querySelector("meta[name=viewport]");

viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height');

}

if(navigator.userAgent.match(/Android/i)){

window.scrollTo(0,1);

}

</script>

<meta name="apple-mobile-web-app-capable" content="yes" />

<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />

<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />

<script type="text/javascript">

var baseDir = '{$content_dir}';

var baseUri = '{$base_uri}';

var static_token = '{$static_token}';

var token = '{$token}';

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

var priceDisplayMethod = {$priceDisplay};

var roundMode = {$roundMode};

</script>

<link href="{$css_dir}normalize.css" rel="stylesheet" type="text/css" media="all" />

<link href="{$css_dir}bootstrap.css" rel="stylesheet" type="text/css" media="all" />

<link href="{$css_dir}bootstrap-responsive.css" rel="stylesheet" type="text/css" media="all" />

<link href="{$css_dir}font.css" rel="stylesheet" type="text/css" media="all" />

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />

{/foreach}

{/if}

<link href="{$css_dir}320.css" rel="stylesheet" type="text/css" media="all" />

<link href="{$css_dir}480.css" rel="stylesheet" type="text/css" media="all" />

<link href="{$css_dir}768.css" rel="stylesheet" type="text/css" media="all" />

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

<script type="text/javascript" src="{$js_uri}"></script>

{/foreach}

{/if}

<script src="{$js_dir}/source/bootstrap.js"></script>

<script src="{$js_dir}/source/plugins.js"></script>

<script src="{$js_dir}/source/footable.js"></script>

<script src="{$js_dir}/source/jquery.core-ui-select.js"></script>

<script src="{$js_dir}/source/jquery.scrollpane.js"></script>

<script src="{$js_dir}/source/jquery.uniform.js"></script>

<script src="{$js_dir}/source/jquery.mousewheel.js"></script>

<script src="{$js_dir}/source/mainscript.js"></script>

<script src="{$js_dir}/source/modernizr-2.5.3.min.js"></script>

{$HOOK_HEADER}

<script src="{$js_dir}/source/jquery.carouFredSel-6.1.0.js"></script>

<script src="{$js_dir}/source/jquery.touchSwipe.min.js"></script>

</head>

<!--[if lt IE 8]><div style='clear:both;height:59px;padding:0 15px 0 15px;position:relative;z-index:10000;text-align:center;'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div><![endif]-->

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $content_only} content_only {/if}">

{if !$content_only}

{if isset($restricted_country_mode) && $restricted_country_mode}

<div id="restricted-country">

<p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>

</div>

{/if}

<div id="wrapp">

<div id="wrapp_2">

<header id="header" class="container ">

<div id="header-inner" >

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />

</a>

{$HOOK_TOP}

</div>

</header>

<div id="columns" class="container ">

<div class="row ">

<div class="loader_page">

<aside id="left_column" class="span3 column" style=" display:none">

{$HOOK_LEFT_COLUMN}

</aside>

{if $page_name == 'index'}

<div id="center_column" class="center_column span12 clearfix">

{else}

<div id="center_column" class="center_column span9 clearfix">

{/if}

{/if}

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

 

footer.tpl

 

{*

* 2007-2013 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.or...ses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2013 PrestaShop SA

* @license http://opensource.or...ses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

 

{if !$content_only}

</div>

 

<!-- Right -->

<aside id="right_column" class="span3 column right_home">

{$HOOK_RIGHT_COLUMN}

</aside>

</div>

</div>

</div>

<div id="footer" class="footer-bg-mob ">

<footer class="container ">

{$HOOK_FOOTER}

<div id="row-footer">

<p class="row-footer">© {$smarty.now|date_format:"%Y"} {l s='Powered by' mod='blockcms'} <a href="http://www.badgersett-historical.com">Badgersett Historical</a>™. All rights reserved</p>

</div>

</footer>

</div>

</div>

</div>

</div>

</div>

{/if}

</body>

</html>

 

{literal}

<script>

$(function() {

$( "#accordion" ).accordion({

heightStyle: "content"

});

});

</script>

{/literal}

 

default.tpl

 

<div style="clear:both"></div>

<div id="lofadvafooter{$pos}" class="lofadvafooter">

{foreach from=$lofpositions item=blocks key=key_pos}

<div id="lofadva-pos-{$key_pos + 1}" class="lof-position" style="width:100%">

<div class="lof-position-wrap">

{foreach from=$blocks item=block key=key_block}

<div id="lofadva-block-{$key_block + 1}" class="lof-block">

<div class="lof-block-wrap">

{if $block.show_title}

<h2><span>{$block.title}</span></h2>

{/if}

<ul class="lof-items">

{foreach from=$block.items item=item key=key_item}

{if $item.type == 'link'}

<li class="link"><a href="{$item.link_item}" title="{$item.title}" target="{$item.target}" {if $item.target == '_newwithout'}onclick='javascript: window.open("{$item.link_item}", "", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes"); return false;'{/if}>{if $item.show_title}{$item.title}{/if}</a></li>

{elseif $item.type == 'module'}

<li class="lof-module">

{if $item.show_title}<h2>{$item.title}</h2>{/if}

{$item.module}

</li>

{elseif $item.type == 'custom_html'}

<li class="lof-text">

{if $item.show_title}<h2><span>{$item.title}</span></h2>{/if}

{$item.text}

</li>

{elseif $item.type == 'gmap'}

<li class="lof-gmap">

{if $item.show_title}<h2>{$item.title}</h2>{/if}

{literal}

<script type="text/javascript">

function initialize() {

var myOptions = {

zoom: 8,

center: new google.maps.LatLng({/literal}{$item.latitude}, {$item.longitude}{literal}),

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("lofmap_canvas{/literal}{$item.id_loffc_block_item}{literal}"), myOptions);

}

function loadScript() {

var script = document.createElement("script");

script.type = "text/javascript";

script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCgnzQHpG4TAVJJAFgEp6u1arCQ3dlwVB8&sensor=true&callback=initialize";

document.body.appendChild(script);

}

window.onload = loadScript;

</script>

{/literal}

 

<div id="accordion">

 

<h3>Section 1</h3>

 

<div>

 

<p>u can place ur things here</p>

 

</div>

 

<h3>Section 2</h3>

 

<div>

 

<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>

 

</div>

 

<h3>Section 3</h3>

 

<div>

 

<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>

 

<ul>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

<li>List item</li>

 

</ul>

 

</div>

 

</div>

<div id="lofmap_canvas{$item.id_loffc_block_item}" class="lofmap_canvas"></div>

</li>

{elseif $item.type == 'addthis'}

<li class="lof-addthis">

{if $item.show_title}<h2>{$item.title}</h2>{/if}

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_preferred_1"></a>

<a class="addthis_button_preferred_2"></a>

<a class="addthis_button_preferred_3"></a>

<a class="addthis_button_preferred_4"></a>

<a class="addthis_button_compact"></a>

<a class="addthis_counter addthis_bubble_style"></a>

</div>

{literal}

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fc893c046e9bd1b"></script>

{/literal}

</li>

{/if}

{/foreach}

</ul>

</div>

</div>

{/foreach}

<div style="clear:both;"></div>

</div>

</div>

{/foreach}

</div>

Edited August 16, 2013 by diurno (see edit history)

[Jiten rash (away)]

no ur not ..u didnt added css and jquery ui

[diurno]

In header.tpl? I think I did, it's at the bottom of the file (in green on here)

[Jiten rash (away)]

may be in wrong position..thats y its not working

[diurno]

Where should I put it then? Any ideas?

[Jiten rash (away)]

put below <head>

 

above</head>

[diurno]

Done that and it still doesn't work so annoying

[Jiten rash (away)]

no its still not loaded paste ur header.tpl

[Dampers]

The urls' to the jquery site aren't full. It should be: http://code.jquery.com/ui/1.10.3/jquery-ui.js and http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css

 

Cheers!