CODEWITHSUNDEEP
javascriptjquery
Ivy
Ivy

Reputation: 1

How to simplify this code below?

I'd like to simplify this javascript code, but I don't have ability to do this, plz help me, I will really appreciate it, thank you very much!

$(function() {
    $("#show1").click(function() {
        $("#showmore1").toggle();
    })
    $("#show2").click(function() {
        $("#showmore2").toggle();
    })
    $("#show3").click(function() {
        $("#showmore3").toggle();
    })
})

[2016/05/24] Here is my complete code, https://jsfiddle.net/o970b9cn/ sorry for my missing information. I'd like to show many reviews, but it will hide the complete information first, when the user clicks on the button, to start the full text.

I tried the answer below yesterday, but it still can not run...sorry for my insufficient ability...

Upvotes: -1

Views: 99

Answers (3)

Rayon
Rayon

Reputation: 36609

Use Attribute Starts With Selector [name^=”value”]

Selects elements that have the specified attribute with a value beginning exactly with a given string.

$(function() {
  $("a[id^='show']").click(function() {
    $(this).prev('div').find('span[id^="showmore"]').toggle();
  });
});


$(function() {
  $("a[id^='show']").click(function() {
    $(this).prev('div').find('span[id^="showmore"]').toggle();
  });
});
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url(https://fonts.googleapis.com/css?family=Nunito:300);
 *,
html,
body {
  /*font-family: 'Noto Sans TC', 'Nunito', sans-serif;
	font-weight: 300;*/
  font-family: 'cwTeXYen', 'Nunito', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  letter-spacing: .2pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px;">
  <div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore1" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
  </div>
  <a href="javascript:;" id="show1" style="display: block; margin: 5px 0;">(read more)</a>
</div>

<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px; margin-top: 30px;">
  <div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore2" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
  </div>
  <a href="javascript:;" id="show2" style="display: block; margin: 5px 0;">(read more)</a>
</div>

<div class="parents_reviews" style="background: #fff; width: 300px; text-align: center; padding: 15px 20px; border-radius: 25px; margin-top: 30px;">
  <div style="color: #6bc4ea; font-size: 15px;">Two more earthquakes hit this month. They are not as bad, however. Only one person dies.Someone films the streets when the earthquakes hit. People are scared. They run in the streets.<span id="showmore3" style="display: none; font-size: 15px;">Difficult words: earthquake (when the ground moves), damage (to break), infrastructure (the roads, power supplies, and buildings that people need)</span>
  </div>
  <a href="javascript:;" id="show3" style="display: block; margin: 5px 0;">(read more)</a>
</div>

Fiddle Demo

Upvotes: 0

user6213434
user6213434

Reputation:

You can use each, simply you will iterate the function on each element that has the same attribute, in this case we will use class because the id should be unique.

We will give to each container (#show1 #show2 ...) a class such show and make this function https://jsfiddle.net/sL3qk853/

$('.show').each(function (index, elem) {
    $(elem).on('click', function () {
        $(this).find('div[id^="showmore"]').toggle();
    });
});

If you have more than a div in the container you can specify the selected div by using begin with selector ( div[attribute^="something"] ) with a find , or just use children if you have a one div or want to make this on all the divs inside the .show container $(this).children().toggle(); .

Edit: instead of using class and each you can do this 

$('div[id^="showCont"]').on('click', function () {
   $(this).children().toggle();
});
div {
  width: 100px;
  height: 100px;
  background-color: #eee;
  margin: 1px;
  float: left
}

div[id^="showmore"] {
  background-color: #3498db;
  float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showCont1">
  <div id="showmore1">
  </div>
</div>

<div id="showCont2">
  <div id="showmore2">
  </div>
</div>

<div id="showCont3">
  <div id="showmore3">
  </div>
</div>

Upvotes: 0

sangram parmar
sangram parmar

Reputation: 8726

  1. Give common class to each "show<your_id>". e.g. showmore
  2. give some attribute to your element like data-showid, which contains id of toggle element.
  3. For class "showmore", write click function

Like this

<a id="show1" class="showmore" data-showid="showmore1" >show more</a>
<a id="show2" class="showmore" data-showid="showmore2" >show more</a>
<a id="show3" class="showmore" data-showid="showmore3" >show more</a>

<script>
    $(function() {
        $(".showmore").click(function() {
            var this_button = $(this);
            $("#"+this_button.attr("data-showid")).toggle();
        })
    })
</script>

Upvotes: 3

Related Questions