how to make button active when clicked?

0
Hi, I have changed the tab container to buttons and based on the visibility the data will shown accordingly. When I clicked on the buttons I want to show that buttons like tab container with lined below that buttons for active one. I tried to apply the External CSS for that, but  when I clicked on the buttons the active buttons doesn’t stay active when I click on other place on the page. What should I do for that, please suggest.
asked
2 answers
6

Hi chaitali,

You can do this by implimenting a logic,

 

First make a NPE and add an ENum and attribute to it (Enum based on the name of your tab name eg TabAttr) .

Now add a data view on the page, where you want to show the tabs on. now set the data source of the data view as a microflow and add a create activity , which creates the NPE object.

Now add some buttons in the place of the tab and you can apply custom css on them , so they can loo like tabs

( border-bottom: 3px solid #54489c ).

Now on the click button call a nanoflow, which sets the TabAttr as the button name (eg. on clicking home, the enum should be set to home) 

 

Now add various containers on the page and add conditional visibility on them, depending on the Enum.

And add data inside the containers, this way you can easily impliment your logic.

Hope it helps!

answered
4

Hi Chaitali,

If you are using the buttons in a snippet try to use the below code in a javascript snippet.

add the btntabs class for the buttons and also the class listswitch and similar classes for differ buttons and add the active class in the SCSS file and customize how the tab wants to look.

$('.btntabs').click(function() {
  $('.listswitch').addClass('active');
  if ($(this).is("active"))
    $('.btntabs').not(this).removeClass('active');
  else
    $(this).addClass('active');
  $('.btntabs').not(this).removeClass('active');
});
 

if you are not using snippet then it is very easy just add the active class in scss file and add the class to particular button which page wants to be active on navigating.

 

hope this helps you.

 

answered