Reputation: 867

Changing elements in div based on another div click

I have a "list" with three items. Each list by default, shows an image and text.

When one of these div's is clicked, I want its content to be shown in another div (along with more information).

The first clickable-li content will always be displayed in the secondary div. By content, I am referring to 1. It's image 2. It's header (h3) and 3. It's textm which for now is "this is sample text for icon 1".
From there, any other click any clickable-li, it will show its information accordingly.

Current approach:

$('#icon-1').click(function() {
  $('image_col-2-wrapper h3').html('icon 1');
  $('image_col-2-wrapper p').html('this is sample text for icon 1');
});

$('#icon-2').click(function() {
  $('image_col-2-wrapper h3').html('icon 2');
  $('image_col-2-wrapper p').html('this is sample text for icon 2');
});

$('#icon-3').click(function() {
  $('image_col-2-wrapper h3').html('icon 3');
  $('image_col-2-wrapper p').html('this is sample text for icon 3');
});

img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<div class="container">

  <!-- LEFT -->

  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->

  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

  <!---->

</div>

Upvotes: 2

Answers (4)

ssamuel

Reputation: 287

You have to use '.' dot with the class name as $('.classname').click()...that was the only issue

$('#icon-1').click(function() {
  $('.image_col-2-wrapper h3').html('icon 1');
  $('.image_col-2-wrapper p').html('this is sample text for icon 1');
});

$('#icon-2').click(function() {
  $('.image_col-2-wrapper h3').html('icon 2');
  $('.image_col-2-wrapper p').html('this is sample text for icon 2');
});

$('#icon-3').click(function() {
  $('.image_col-2-wrapper h3').html('icon 3');
  $('.image_col-2-wrapper p').html('this is sample text for icon 3');
});

img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<div class="container">

  <!-- LEFT -->

  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->

  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

  <!---->

</div>

Upvotes: 1

Takit Isy

Reputation: 10081

As ssamuel said, your issue was the missing . in the class name.

⋅ ⋅ ⋅

Anyway…

You could enhance your code to have only one JavaScript function. And keep all the content in the HTML.

New snippet (using an hidden div element as your html container)

$('.clickable-li').click(function(title, text) {
  $('.image_col-2-wrapper h3').html($(this).attr("mytitle"));
  $('.image_col-2-wrapper p').html($(this).find(".mytext").html());
});

img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}

.mytext {
  display: none;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">

  <!-- LEFT -->
  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1" mytitle="Icon 1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
      <div class="mytext">
        <p>this is sample text for icon 1</p>
      </div>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2" mytitle="Icon 2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
      <div class="mytext">
        <p>this is sample text for icon 2</p>
        <h4>But this one also has a header</h4>
        <p>and more text!</p>
      </div>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3" mytitle="Icon 3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
      <div class="mytext">this is sample text for icon 3</div>
    </div>
  </div>

  <!-- RIGHT -->
  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>
</div>

⋅ ⋅ ⋅

Old snippet (using custom attributes)

$('.clickable-li').click(function(title, text) {
  $('.image_col-2-wrapper h3').html($(this).attr("mytitle"));
  $('.image_col-2-wrapper p').html($(this).attr("mytext"));
});

img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">

  <!-- LEFT -->
  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1" mytitle="Icon 1" mytext="this is sample text for icon 1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2" mytitle="Icon 2" mytext="this is sample text for icon 2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3" mytitle="Icon 3" mytext="this is sample text for icon 3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->
  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

</div>

Upvotes: 1

4b0

Reputation: 22323

There is no need to use a separate click handle. Just one click with a wildcard does that. Use split on id to get the desired value and append that on your message. Use . for class and # for id.

$('[id*="icon"]').click(function(i, ele) {
  var id = $(this).attr('id').split('-')[1];
  $('.image_col-2-wrapper h3').html('icon ' + id);
  $('.image_col-2-wrapper p').html('this is sample text for icon ' + id);
});

img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <!-- LEFT -->

  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3">
      <img id="image" src="http://chittagongit.com/images/3-icon/3-icon-7.jpg">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->

  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

  <!---->

</div>

Upvotes: 0

Sumesh TG

Reputation: 2575

$('.clickable-li').click(function(i, elem) {
  var id = $(this).attr('id').split('-')[1];
   $('.image_col-2-wrapper h3').html('icon ' + id);
  $('.image_col-2-wrapper p').html('Text for icon ' + id);
  var url=$(this).find("img").attr("src");
  $(".image_col-2-wrapper img").attr('src',url);
});

img {
  height: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.text_col-1 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
}

.text_col-1 .clickable-li {
  cursor: pointer;
}

.image_col-2 {
  background-color: #5fc8c5;
  width: 650px;
}

.image_col-2-wrapper {
  padding: 40px;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <!-- LEFT -->

  <div class="text_col-1">

    <!-- ICON 1 -->
    <div class="clickable-li" id="icon-1">
      <img id="image" src="https://img.icons8.com/metro/1600/1-circle.png"><br>
      <span>Icon 1</span>
    </div>

    <!-- ICON 2 -->
    <div class="clickable-li" id="icon-2">
      <img id="image" src="https://img.icons8.com/metro/1600/2-circle.png"><br>
      <span>Icon 2</span>
    </div>

    <!-- ICON 3 -->
    <div class="clickable-li" id="icon-3">
      <img id="image" src="https://img.icons8.com/metro/1600/3-circle.png">
      <br>
      <span>Icon 3</span>
    </div>
  </div>

  <!-- RIGHT -->

  <div class="image_col-2">
    <div class="image_col-2-wrapper">
      <img src="https://img.icons8.com/metro/1600/1-circle.png">
      <h3>Icon 1</h3>
      <p>this will be the text that appears on li click</p>
    </div>
    <p></p>
  </div>

  <!---->

</div>

Add a click event on common class clickable-li.

Upvotes: 0

Changing elements in div based on another div click

Answers (4)

Related Questions