jQuery - Want to restrict a function to only elements within one div using

Question

Bascially, I have this:

<div class="articlecontainer">
 <div class="image"><img src="some_image.jpg"></div> <!----image is floated left--->
  <div class="content">
   <p>
      Some text about the image. 
      Some text about the image.
      Some text about the image.
   </p>
    <span class="morelink">Link to Read More</span>
     <div class="more">
        <p>
          More text about the image. 
          More text about the image.
          More text about the image.
       </p>
     </div> <!--- close more --->
   </div> <!--- close content --->
 </div> <!--- close articlecontainer --->

I want my function to run ONLY on <div class="image"> within the same <div class="articlecontainer"> div as the link in <span class="morelink">.

Is this possible? How can I do it?

I know I could do this by giving everything an ID and repeating the function for each article using the different IDs, but that doesn't seem efficient to me.

Here is what I am doing currently:

Widths are defined. The only thing I am changing is height.

I have an image next to a block of text. This block of text is inside a div with the .content class. Those divs start at one height (dependent on the amount of text in it), but the height can increase if a "read more" link is clicked.

The images have the .image class, and initial height of that class is dictated by the height of the content div. When "Read More" link is clicked, the "more" div is shown, and the image is displayed at 100% height.

I want to use classes because I have multiple articles that follow this same pattern and I don't want to have several repeating IDs that do the same thing.

The problems:

Due to using classes, the height for all images with the .image class is initially set by the first div with the .content class, and when any "read more" link is clicked, all images are expanded.

What I want to do:

I would like to tie the image height, content height, and "read more" link together. I.e., when the "more" link is clicked in Article 1, it only affects Article 1, when the "more" link is clicked in Article 2, it only affects Article 2 and so on.

Is this possible?

Pen of what I'm doing currently:

http://codepen.io/adamcycle/pen/qRRzja

Answer 1

Made few code changes in your javascript. Is it what you want?

var more1height = $("#more1").height();
var more2height = $("#more2").height()
$("#more1, #more2").hide();
var imgHeight = $(".pic").height();
var contHeight = $(".content").height();
$(".image").height(contHeight);
$("#more1link").click(function() {
  var image = $('#more1').parent('.content').siblings('.image');
  if  ($('#more1').is(":visible")) {
    $("#more1").hide(200);
    image.height(contHeight);
  } else {
    $("#more1").slideDown(200);
    image.height(contHeight+more1height);
  }
});

$("#more2link").click(function() {
  var image = $('#more2').parent('.content').siblings('.image');
  if  ($('#more2').is(":visible")) {
    $("#more2").hide(200);
    image.height(contHeight);
  } else {
    $("#more2").slideDown(200);
    image.height(contHeight+more2height);
  }
});

.articlecontainer {
    margin-bottom: 15px;
    overflow: auto;
}
.content {
    width: auto;
    padding: 0 15px;
    overflow: hidden;
    line-height: 1.6;
    margin-top: -20px;
  }
.content h3 {
    margin-top: -6px;
    font-weight: 400;
}
.image {
    float: left;
    width: 450px;
    overflow: hidden;
    display: block;
    border: 2px solid #f5f5f5;


}
.pic {
  width: 100%;
  }
.morelink {
    color: gray;
    cursor: pointer;

}
.more {
display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="articlecontainer">
                      <h2>Cat 1</h2>

<div class="image"><img src="http://i.imgur.com/znXfFyn.jpg" class="pic" alt="cat" /> </div>
<div class="content">
  <p>Cat not kitten around flop over drink water out of the faucet and chase ball of string. Sleep on dog bed, force dog to sleep on floor. Cats secretly make all the worlds muffins meowing non stop for food. Shove bum in owner's face like camera lens fall over dead (not really but gets sypathy) for instantly break out into full speed gallop across the house for no reason russian blue wake up human for food at 4am wake up human for food at 4am but jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed.</p>
                            <p><span class="morelink" id="more1link"><em>Read More</em></span>

<div class="more" id="more1">
  <p>Have my breakfast spaghetti yarn unwrap toilet paper yet bleghbleghvomit my furball really tie the room together but cough furball or lick yarn hanging out of own butt, love to play with owner's hair tie lick butt and make a weird face. Have secret plans mrow and lay on arms while you're using the keyboard or stare at the wall, play with food and get confused by dust has closed eyes but still sees you run in circles, yet knock dish off table head butt cant eat out of my own dish. </p>
                          </div><!--- end more --->
</div><!--- end content --->
</div><!--- end articlecontainer --->

<div class="articlecontainer">
                      <h2>Cat 2</h2>

<div class="image"><img src="http://i.imgur.com/ocquBvl.jpg" class="pic" alt="cat" /> </div>
<div class="content">
  <p>Cat not kitten around flop over drink water out of the faucet and chase ball of string. Sleep on dog bed, force dog to sleep on floor. Cats secretly make all the worlds muffins meowing non stop for food.</p>
                            <p><span class="morelink" id="more2link"><em>Read More</em></span>

<div class="more" id="more2">
  <p>Have my breakfast spaghetti yarn unwrap toilet paper yet bleghbleghvomit my furball really tie the room together but cough furball or lick yarn hanging out of own butt, love to play with owner's hair tie lick butt and make a weird face. Have secret plans mrow and lay on arms while you're using the keyboard or stare at the wall, play with food and get confused by dust has closed eyes but still sees you run in circles, yet knock dish off table head butt cant eat out of my own dish. </p>
                          </div><!--- end more --->
</div><!--- end content --->
</div><!--- end articlecontainer --->