I'm using AsyncTask to request json data through php which is uploaded in AWS cloud. Below is my code:

`@Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 new JsonTask().execute("http://XXX.qiykuanrge.us-west-2.elasticbeanstalk.com/index.php/?key=leg");
 return leg_state_view;
 }`

```
public class JsonTask extends AsyncTask<String, String, List<CongressModel>> {
    @Override
    protected List<CongressModel> doInBackground(String... params) {
        HttpURLConnection connection = null;
        BufferedReader reader = null;

        try {
            URL url = new URL(params[0]);
            connection = (HttpURLConnection) url.openConnection();
            connection.connect();

```

...

I got this error:

java.net.UnknownHostException: Unable to resolve host "csci571.qiykuanrge.us-west-2.elasticbeanstalk.com": No address associated with hostname

my php looks like this:

```js
<?php
 date_default_timezone_set('UTC');
 header('Access-Control-Allow-Origin: *');

 if (isset($_GET["key"])) {

    if ($_GET["key"] == "leg") {
   $url = "http://104.198.0.197:8080/legislators?order=state__asc,last_name__asc&per_page=all&apikey=";
   $content = file_get_contents($url);
   echo $content;
  }
```

Does someone know what is going on?
['https://Stackoverflow.com/questions/40901121', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5538299/']
There is no need to use jquery. Just use **ng-class** and add a condition to show or hide that class to your post. Se snipped how content is shown or hidden with the hidden class according to property `post.readMore` in the controller

```js
angular.module('myapp', [])
  .controller('foo', function($scope) {

    $scope.post = {
      readMore: true,
      fields: {
        title: 'The post title',
        date: new Date()
      }
    }

    $scope.showReadMore = function(post) {
      post.readMore = true;
    }
    $scope.hideReadmore = function(post) {
      post.readMore = false;
    }

  });
```

```html
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <style type="text/css">
    .hidden {
      display: none;
    }
  </style>

</head>

<body ng-app="myapp">
  <div ng-controller="foo">

    <div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" style="max-width: 400px">
      <a ng-click="goToPostDetail(post, $index)">
        <img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt="" />

        <div class="blogOverlay" ng-class="{'hidden' : !post.readMore}" ng-mouseover="showReadMore(post)" ng-mouseleave="hideReadmore(post)">
          <h2>{{ post.fields.title }}</h2>
        </div>

        <div class="newOverlay" ng-class="{'hidden' : post.readMore}" ng-mouseleave="showReadMore(post)" ng-mouseover="hideReadmore(post)">
          <h2>{{ post.fields.title }}</h2>
          <h3>{{post.fields.date}}</h3>
          <a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a>
        </div>

      </a>
    </div>

  </div>

</body>

</html>
```
give class name something like `class="blogOverlay_{{$index}}"` and then pass `$index` to JavaScript like `showReadMore($index)`

This way Your class names are unique and they will change for only `index` you want to change