Opening specific panel in accordion bootstrap when there is a bookmark in it

Aris · Post by **Aris** » Sat Sep 21, 2019 8:33 pm

HI.

Probably my question means nothing.

I wish to make a link in a web page to open a specific panel in an accordion bootstrap (with FAQ), which is located in another web page.

I tried to put in this panel a bookmark, but there is no result.

Is there something I must take in to consideration?

Thank you.

Post by **Pablo** » Sat Sep 21, 2019 8:39 pm

This is only possible by adding custom code:
https://www.digiplek.nl/open-jquery-ui- ... -hash.html

Aris · Post by **Aris** » Sat Sep 21, 2019 10:44 pm

Thank you.
Thank you.
Thank you.

DarioMartin · Post by **DarioMartin** » Mon Feb 24, 2020 8:43 pm

Can anyone advise how the extra code is inserted in the Accordion code - its not using the Edit Object HTML and I can't seem to do it editing Page HTML - anyone help me here?

BaconFries · Post by **BaconFries** » Mon Feb 24, 2020 8:53 pm

In general it is out with the forum to assist with inserting external / custom code. Also note the program is not a HTML Editor but HTML Generator. To add external / custom code you can use the HTML Object.
https://www.wysiwygwebbuilder.com/add_html.html

DarioMartin · Post by **DarioMartin** » Tue Feb 25, 2020 9:29 am

I'm fairly familiar with the HTML object, having used it in various websites I've put together using WYSIWYG, unfortunately it won't allow me to modify the code generated. In the example given here by Pablo, the actual code for the Accordion object is modified above the <body> tag. This would normally be achieved by using the "Edit Page HTML" function, again, with which I am familiar, but I can't seem to see how the code for the Accordion object has been modified to allow that extra bit of code to be inserted, so I was hoping someone to could point me in the right direction.

Post by **Pablo** » Tue Feb 25, 2020 9:57 am

You do not need to edit the existing code. It's extra code that can be added via Page HTML.

DarioMartin · Post by **DarioMartin** » Tue Feb 25, 2020 10:14 am

Good morning, many thanks for your response. I have added the extra code after <head> and before body :

Code: Select all

<script>
$(function() {
   var hash = window.location.hash;
   var anchor = $('a[href$="'+hash+'"]');
   if (anchor.length > 0){
   anchor.click();
   }
}
</script>

This is because I cannot insert it in the place outlined in your source. My Page Code looks like this:

Code: Select all

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="generator" content="WYSIWYG Web Builder 15 - http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="apple-icon.png" rel="apple-touch-icon" sizes="191x192">
<link href="base/jquery-ui.min.css" rel="stylesheet">
<link href="VAVAYoga.css" rel="stylesheet">
<link href="ServNatTherapy_ES.Accordion.css" rel="stylesheet">
<script src="jquery-1.12.4.min.js"></script>
<script src="wb.stickylayer.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{
   $("#LangLayer_Full").stickylayer({orientation: 4, position: [0, 0], delay: 250});
   $("#LangLayer_320px").stickylayer({orientation: 4, position: [0, 0], delay: 250});
   $("#Accordion1").accordion(
   {
      event: 'click',
      animate: 'linear',
      active: false,
      header: 'h3',
      heightStyle: 'fill'
   });
   $("#Accordion1").data("height", $("#Accordion1").outerWidth());
   $(window).resize(function()
   {
      if ($("#Accordion1").data("height") != $("#Accordion1").outerWidth())
      {
         $("#Accordion1").accordion("refresh");
         $("#Accordion1").data("height", $("#Accordion1").outerWidth());
      }
   });
});
</script>
<script>
$(function() {
   var hash = window.location.hash;
   var anchor = $('a[href$="'+hash+'"]');
   if (anchor.length > 0){
   anchor.click();
   }
}
</script>

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">


</head>

It is, of course, not working .... Could you give me some direction?

Post by **Pablo** » Tue Feb 25, 2020 11:36 am

In this case, the location of the code is not why it's not working.
It think the code is not correct.

Code: Select all

<script>
$(document).ready(function()
{
   var hash = window.location.hash;
   var anchor = $(hash);
   if (anchor.length > 0)
   {
      anchor.click();
   }   
});
</script>

Note that I cannot teach you how to write custom code.

DarioMartin · Post by **DarioMartin** » Tue Feb 25, 2020 11:50 am

I understand you cannot teach me how to write custom code; being a C / COBOL programmer, I am acquainted with writing code.
What I cannot fathom, is within the restrictions of the program, using Edit Page HTML, how the code snippet supplied has been inserted following the declaration of the function. Using the Edit Page HTML function, inserting between <head> tags, I cannot choose whereabouts to place that code. It will by default appear after the closing "}" of the function and the closing </script> tag .... unless there is of course some method of placing the code snippet where you need it within the structure, using Edit Page HTML

Post by **Pablo** » Tue Feb 25, 2020 12:09 pm

WYSIWYG Web Builder not a HTML or code editor. You cannot edit the code directly, because the code does not existent until you preview/publish the page.
Page HTML is meant to add cusptm code, not to edit generated code.

The position of the code does not matter. if you place it between the head tags then it will work ok.

DarioMartin · Post by **DarioMartin** » Tue Feb 25, 2020 12:54 pm

So it doesn't need to be within a function() or within <script> tags?

Post by **Pablo** » Tue Feb 25, 2020 1:04 pm

The code example of my previous reply can be placed between head tags.
Multiple '$(document).ready(' functions can be used per page.

DarioMartin · Post by **DarioMartin** » Wed Feb 26, 2020 11:37 am

Many thanks for your time and effort on this - I appreciate you aren't really here to discuss non-generated code; it is only that this particular function would be incredibly useful on the accordion object.

As it stands, even using the code as supplied, I cannot get it to open the tab, using WB 15.3. I have debugged, and the anchor.length stays at 0;

There are no href on the accordion object to link to, I have defined layers within each accordion page and can only select the layers as a bookmark in the menu. Each Layer has a unique ID.

Post by **Pablo** » Wed Feb 26, 2020 12:17 pm

Did you specify the ID of the panel you want to open in the URL?

DarioMartin · Post by **DarioMartin** » Wed Feb 26, 2020 6:36 pm

Yes, selected it as the bookmark in the menu. have just given myself a crash course on jQuery to better understand the statements.
This is the declaration between <head> tags

Code: Select all

<script>
$(document).ready(function()
{
   var hash = window.location.hash;
   var anchor = $(hash); 
  
   if (anchor.length > 0)
   {
      anchor.click();
   }  
});
</script>

I put debug alerts in the code. anchor.length returns 1 and the contents of "hash" returns "#IR". This is the bookmark I have selected in the menu.
The id of the layer is "IR" in the accordion.

These are the first six lines of the generated accordion code

Code: Select all

<div id="wb_Accordion1">
<div id="Accordion1">
<h3>Terapia de calor Infra Rojo</h3>
<div>
<div id="IR">
<div id="IR_Container">

Post by **Pablo** » Wed Feb 26, 2020 6:54 pm

This seems to be correct.

DarioMartin · Post by **DarioMartin** » Thu Feb 27, 2020 10:14 am

Beings my accordion is itself set within a layer which displays in the content place holder of a master page, I also did a very very simple "site" using only two basic pages to see if it was the layout of my site causing issues; one page with nothing but a simple text menu, one with a straight accordion on the page and the same menu on the accordion page and I left debug alerts in the code.

In one panel of the accordion I put a bookmark, and selected that bookmark in the menu by its native name "Bookmark1" and in the next panel I put a Layer, and in the menu, selected the bookmark "Layer1"

Panel would not open at all using either of the menus. Using the "debug" alerts I could see the correct names being passed through : "#Bookmark1" and "#Layer1", but panel(s) did not open. I am using WB 15.3.0

This would be really really useful - is there any chance it could be implemented in a future version of WebBuilder??

Post by **Pablo** » Thu Feb 27, 2020 10:55 am

You can post suggestions here:
https://www.wysiwygwebbuilder.com/forum ... m.php?f=28

If more users find this useful, then I will consider it for future development.

DarioMartin · Post by **DarioMartin** » Thu Feb 27, 2020 12:17 pm

Posted - thanks again for the time you've given me.

www.wysiwygwebbuilder.com

Opening specific panel in accordion bootstrap when there is a bookmark in it

Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it

Re: Opening specific panel in accordion bootstrap when there is a bookmark in it