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

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Aug 11, 2017 at 11:51 cpluscplus 1,11544 gold badges2525 silver badges5757 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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>