-1

i want to remove the bottom border of a button after clicking it. button is not a submit button. When i click it for the second time, the border should be 1px; Can some one help me with implementing this

Meena
  • 17
  • 4
  • Can you show us what you have tried so far and describe why it's not working for you? – Lex Mar 11 '16 at 22:33
  • Is this a duplicate of this?: http://stackoverflow.com/questions/4524180/unwanted-outline-or-border-around-button-when-clicked – Baronz Mar 11 '16 at 22:34
  • You are going to want some javascript onclick events tied to your button element. The JS will have to test the number of times it has been click on, and change the class associated with the button element. – Jeff.Clark Mar 11 '16 at 22:41
  • 1
    guys try to not disappoint developers, you are here not to make them look stupid, Meena, put your code in order to get help, and read about how to write a question in Stackoverflow in order to get help. – amal50 Mar 11 '16 at 23:05

1 Answers1

1

If you have 1 button it should be as simple as this:

Angular for Single Button

var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function ($scope) {
  $scope.hideBorder = false;
  $scope.toggleBorder = function () {
    $scope.hideBorder = !$scope.hideBorder;

  }
}]);

HTML for Single Button

<button class="{{hideBorder ? 'button--no-bottom-border': ''}}" ng-click="toggleBorder()">Click Me</button>

CSS

button {
  border: 1px solid black;
  outline: none;
}
.button--no-bottom-border {
  border-bottom: 0px;
}

If you have multiple buttons, your Angular & HTML will change slightly:

Angular for Multiple Buttons

$scope.toggleBorder = function (button) {
    button.hideBorder = !button.hideBorder;
  }
$scope.buttons = [
  {
    text: "Click Me",
    hideBorder: false
  },
  {
    text: "Click Me 2",
    hideBorder: false
  },
  {
    text: "Click Me 3",
    hideBorder: false
  },
];

HTML for Multiple Buttons

<button class="{{button.hideBorder ? 'button--no-bottom-border': ''}}" ng-click="toggleBorder(button)" ng-repeat="button in buttons">Click Me</button>
mhodges
  • 10,938
  • 2
  • 28
  • 46
  • Thank you so much.This is what i wanted. It works perfectly fine :) – Meena Mar 12 '16 at 14:25
  • No problem! If this answer was helpful to you, make sure to mark it as accepted so it can be of benefit to others as well. – mhodges Mar 13 '16 at 07:11