Copenhagen Theme - Home Page Accordions | Community
Skip to main content

Copenhagen Theme - Home Page Accordions

  • March 3, 2017
  • 65 replies
  • 0 views

Show first post

65 replies

ModeratorWes

@Justin - Yes that is possible as well with some code changes.  I just don't have the time to go through and make that happen right now but you the Guide Knowledgebase can be customized any way you would like.


Justin30
  • August 28, 2017

Cool - thanks for all your help! You've got me way ahead of where I was. :)


ModeratorWes

@Justin - Your welcome and best of luck.


Justin30
  • September 1, 2017

Hey Wes - any ideas as to how we could center the logo in our Help Center at the top? When I put the center brackets around the logo url, the logo gets resized.


ModeratorWes
  • Author
  • September 1, 2017

@justin - that would be controlled in the CSS, the logo size and position.  Do you have a link to your Help Center


Justin30
  • September 1, 2017

help.edmunds.com


ModeratorWes
  • Author
  • September 1, 2017

Give this a shot:

In the CSS tab.

Find .header

remove justify-content: space-around.

Add.

.logo {

displayflex;

 justify-contentcenter;

 flex1 auto;

}

 


Justin30
  • September 1, 2017

Thanks Wes. That works better but it seems to be centering the logo between the far left and the submit a request link, which isn't 100% centered on the screen if that makes sense. (I tested this in our sandbox account)


ModeratorWes
  • Author
  • September 1, 2017

@Justin that's about close as I can get it without re-doing all the code.  Yes, it centered between the left and the submit a request.  You could put a margin-left: 60% or something like that to get it perfect but you would need to adjust that per each media query.


Justin30
  • September 1, 2017

Perfect - thank you!!


  • November 9, 2017

Hi Wes - I used your code for the Category page but see it only creates an accordion out of the page header. Do you know how I would create accordions for the Section Tree Titles so that the Article Lists drop down? 

 

https://frontstream.zendesk.com/hc/en-us/categories/200337295-Enterprise-Fundraising

We are in the midst of moving over to Copenhagen. 


ModeratorWes
  • Author
  • November 16, 2017

Hi Jessica - Sorry for the delayed response.  The code would be similar but would require a couple of modifications.  To be clear are you trying to do accordions on your sections page or category page.


  • November 17, 2017

@wes no worries! I am wanting to do accordions on the Category Page. So for example, https://frontstream.zendesk.com/hc/en-us/categories/200337295-Artez  all of the articles would be hidden in the accordion until you click on the title, either Artez Full Training Videos, Getting Started & Account Configuration etc. Does that make sense? 


Heather13
  • November 20, 2017

Ah! I'm looking to do the exact same thing! On the Category page, have all the sections showing but expandable. Then expand again for the articles.


Trapta
  • November 21, 2017

@Jessica Allen and @Heather R ,

You can use {{section_tree_with_article}} instead or {{#each}} component.

If you are using Copenhagen Theme then, go to your category template and remove the code from line no.17 to line no. 53 and add {{section_tree_with_article}} component on its place. Now go to your CSS and paste the below code with your current CSS -

.section-tree-with-article ul.article-list,
.section-tree-with-article article.article-body {display: none;}

.section-tree-with-article .section {margin-bottom: 10px;}

.section-tree-with-article .section h2 {
cursor: pointer;
text-align: left; }

Now go to your JS and paste the below code at the bottom of your code -

$(document).ready(function(){

$('.section-tree-with-article .section h2').click(function(e){
e.preventDefault();
$(this).next('.article-list').slideToggle(250);
});

$('.section-tree-with-article .article-list a').click(function(e){
$(this).next('.article-body').slideToggle(250);
});

});

Let me know how it goes for you.

Thanks


ModeratorWes
  • Author
  • November 21, 2017

@Trapta - Thanks for jumping in while I'm on vacation.  You are my superhero :-)


Trapta
  • November 22, 2017

@Wes - Not to mention but this is what I was supposed to do to achieve our goal ;-)


  • January 26, 2018

Thanks @Wes and @Trapta,

The accordions and {{section_tree_with_article}} are both very useful and just what I was looking for.


  • August 13, 2018

Is there an easy way to make the FIrst category be open by default?


  • September 17, 2018

Hello Wes!

Quick question...I hope,

We are using Professional Environment with Guide, and productivity pack 

I am using the Copenhagen theme for our institution.  The main landing page, is the activity page behind SSO, but anyone can submit a ticket.  I have been creating new ticket forms, and now have the " Submit a request" screen and "Please choose your issue below" on it https://fgcu.zendesk.com/hc/en-us/requests/new

So my first question is this, all references for "request" has been modified to say "ticket"in the guide environment, and now since adding forms, I can not find how to change this particular reference from request to ticket.

Second, can I force an end-user to a specific form instead of letting them choose? Possibly via link directly to the form I want them to go to? 

 

Thank you in advance!


  • September 17, 2018

Is there a way to display ALL articles in the accordion? Verses showing 6 and then a link for See More?  We have 7 to 8 articles in each section, and it would be nice to just display them all when a user expands a section.


Trapta
  • September 30, 2018

@Cboogaart,

I think you have already got an answer for this in the other post of yours.

Thanks


  • October 23, 2018

@Wes,

Thanks for the above just been testing this along with the changes that @Jessica Allen  requested. however when dropping down a section to reveal the articles clicking the article then drops the article down also within the same page along with a link to "View page"

how would I change this so that it just drops the list of articles and then links directly through rather than the preview (although showing the whole article) with the view page link?

 

Hope that makes sense?

 

Cheers


Trapta
  • October 23, 2018

Hey @Andrew Checkley,

Try putting the below code in your script.js file:

var link = $('.section-tree-with-article ul > li > a, .category-tree-with-article ul > li > a');
link.click(function(e){
e.stopPropagation();
window.location.href = $(this).attr('href');
});

Let me know if this solves your issue.

Thanks

Team Diziana


  • October 24, 2018

@Trapta, Works a treat thank you :)