search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

Unable to switch between tabs component. #2722

Closed ramsharma-prog closed 2 years ago

ramsharma-prog commented 2 years ago

Issue

We are unable to switch between tabs when html or nunjucks code copied over to IDE. Could see the the url switching from one tab to another but the UI tab does not switch.

Code:

Contents

{% for title in titles %}

{{ title['section_name'] }}

Add a comment
{% endfor %}

{{criteria}}

querkmachine commented 2 years ago

Hi @ramsharma-prog,

Can I check where you copied this HTML from?

The code you've provided appears to contain various classes that are inserted dynamically by JavaScript. In particular, the govuk-tabs__list-item--selected and govuk-tabs__panel--hidden classes shouldn't be present in your authored HTML, and are probably why the tabs aren't changing correctly.

ramsharma-prog commented 2 years ago

Hi @querkmachine The code was amended from tabs component's HTML to use for a service however if I copy & paste the raw HTML from tabs component, tabs still doesn't not switch in between unless I am missing something? Normally components work as it is when the raw HTML is copied over to an IDE.

querkmachine commented 2 years ago

Is the JavaScript module for the tabs component being loaded? https://frontend.design-system.service.gov.uk/get-started/#5-get-the-javascript-working

ramsharma-prog commented 2 years ago

@querkmachine There was an error in the code. It's working now! Appreciate your response & help!