Toggle Button change color if active/passive

Toggle Button change color if active/passive

jeankjeank Posts: 2Questions: 1Answers: 0

Hi!

I would like to use a table like this:

https://datatables.net/extensions/buttons/examples/column_visibility/columnsToggle.html

I understand tables are available in Bootstrap 4:

https://datatables.net/examples/styling/bootstrap4.html

I understand further that I can custom button

https://datatables.net/extensions/buttons/custom

But my question is how to custom toogle buttons like in my example:

https://www.w3schools.com/code/tryit.asp?filename=GUMEE4PZCIQF

I would like to have all toogle button as btn-success from start

And if clicked turn to btn-danger.

And if clicked again turn back to btn-success.

And how to use this toogle yes/no table in Bootstrap 4 design?

Could anybody help me with this and include a solution in my w3schools code, save it and send me the link?

Thanks

Answers

  • allanallan Posts: 54,886Questions: 1Answers: 8,603 Site admin

    Here is how you can change the class on the button based on its active state (which you get using button().active(). The change of class is performed on the buttons-action event.

    For Bootstrap 4 styling, use the download builder to get all the required files you need.

    Allan

  • jeankjeank Posts: 2Questions: 1Answers: 0

    Hi Allan,

    Hope you are great (like me)!

    Thanks for that quick help.

    I was not successful using download builder, maybe because I`m not such a great coder.

    So I try to adapt via css style.

    https://w3schools.com/code/tryit.asp?filename=GUN0X1X9YPGD

    In most cases it worked but I still need your help:

    1.

    I would like to have a litte bit more space between the buttons and the search field

    2.

    Could the search frame be green from the start instead of grey?

    3.

    How can I change color of blue X in search box right if I input something?

    4.

    How to change PREVIOUS and NEXT Text Color

    5.

    How to change black btn hover color to none or green?

    And last question in general:

    How can I reduce one button/column?

    Thanks

  • allanallan Posts: 54,886Questions: 1Answers: 8,603 Site admin

    I would like to have a litte bit more space between the buttons and the search field

    Looks okay to me.

    Could the search frame be green from the start instead of grey?

    div.dataTables_filter input {
      background-color: green;
    }
    

    It might be worth doing a CSS course online which enable you to do similar CSS tweaks such as in 3-5..

    How can I reduce one button/column?

    I'm afraid I don't understand the question?

    Allan

Sign In or Register to comment.