I want to show my div if user clicks inside the input field, and if clicked outside only, then it should hide it. If clicked inside the field again, it shouldn't hide. Here is my attempt: JSFIDDLE LINK

<div ng-app="app">
<div ng-controller="HelpCtrl">
    <input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp">
    
    <div  class="details" ng-class="{ 'hidden': ! showHelp }">
    <p>
    The help text here!
    </p>
    </div>
</div>
</div>

the problem is that when the page is opened, I see the help text, and it suddenly disappears and when I click inside the field, it shows again, but it disappears only when clicked inside the field again. Now I want it to hide only if clicked outside the field. Please help me with this.

I want to show my div if user clicks inside the input field, and if clicked outside only, then it should hide it. If clicked inside the field again, it shouldn't hide. Here is my attempt: JSFIDDLE LINK

<div ng-app="app">
<div ng-controller="HelpCtrl">
    <input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp">
    
    <div  class="details" ng-class="{ 'hidden': ! showHelp }">
    <p>
    The help text here!
    </p>
    </div>
</div>
</div>

the problem is that when the page is opened, I see the help text, and it suddenly disappears and when I click inside the field, it shows again, but it disappears only when clicked inside the field again. Now I want it to hide only if clicked outside the field. Please help me with this.

• javascript
• jquery
• html
• css
• angularjs

2 Answers 2

Use ng-focus instead of ng-click

Plunker Example

<input type="text" ng-focus="focused = true" ng-blur="focused = false" />
<p ng-if="focused">Input has focus!</p>

below code should help you.

<style>

.hidden{
 -webkit-transition: width 2s; transition: width 2s;
 display:none !important;;

}
.details{
display:block;
}
</style>
    <div ng-app="app">
     <div ng-controller="HelpCtrl">
              <input type="text" id="myText" name="myText" ng-focus="showHelp = true" ng-blur="showHelp = false">

    <div  class="details" ng-class="{'hidden':!showHelp}">
    <p>
    The help text here!
    </p>
    </div>
      </div>
    </div>