Element manipulation with CSS/jQuery

Question

I'm doing some manipulation, presumably with jQuery, which is a lot like a previously asked question here: Hide and show divID with Javascript - Hide when new title is opened

I have made a jsfiddle of my problem. I am working on some pills/tabs, where each pill is split into three parts, each containing a possibility to "Read more", which is where the show/hide comes into play. My jsfiddle is here: https://jsfiddle.net/jwb99gw1/6/

<div class="container">
  <h2>Pills</h2>
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a class="" href="#a">Read more</a>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>Header</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#b">Read more</a>
        </div>

        <div class="col-lg-3 col-md-3 col-sm-3">
      <h3>Something else</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#c">Read more</a>
        </div>
        </div>
        <div id="a">Lorem ipsum (A)</div>
        <div id="b">Lorem ipsum (B)</div>
        <div id="c">Lorem ipsum (C)</div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

At the moment, I have made a purely CSS-based solution, however it is not capable of handling UX. I would like "Read more" to switch to "Hide text", once clicked, and of course if clicked in that state, then hide the text. Ideally, switching pill/tab should also hide elements.

A few things are different in my problem, compared to the question I linked in the beginning. The elements are not enclosed by each other, so I don't think the "this" keyword will work, at least not exactly how the previous question handled it.

How would you go about fixing this? There must be a smarter work-around than ID by ID jQuery handling.

Here is a good place to use `$(elem).data`. You can store information in them just like attributes, instead, they are hidden — Daniel Cheung, Aug 15 '15 at 09:10

Daniel Cheung · Accepted Answer · 2015-08-15T13:08:45.547

I added .display-box to your .container.

HTML

<div class="container display-box">
    ...
        <a data-target="#a">Read more</a>
        <a data-target="#b">Read more</a>
        <a data-target="#c">Read more</a>
    ...
        <div id="a" class="box">Lorem ipsum (A)</div>
        <div id="b" class="box">Lorem ipsum (B)</div>
        <div id="c" class="box">Lorem ipsum (C)</div>
    ...
</div>

JQuery

$(".display-box").each(function () {
    var $this = $(this);
    $this.find("[data-target]").each(function () {
        $(this).click(function () {
            $($this.data("visible")).hide();
            $("[data-target='"+$this.data("visible")+"']").text("Read more");
            if ($this.data("visible") !== $(this).data("target")) {
                $this.data("visible", $(this).data("target"));
                $(this).text("Hide text");
                $($this.data("visible")).show();
            } else {
                $this.data("visible", "")
            }
        });
    });
})

CSS

.box {
    display:none;
}

jsfiddle: https://jsfiddle.net/jwb99gw1/11/

Explaination

Basically, this iterates for every .displaybox and find every element that has an attribute data-target then add a click event listener for each of them.

It hides the element specified in the data data-visible for .display-box but this data is hidden from inspector. It then grabs the value of data-target from clicked links and store it back in data-visible. Then it shows the element specified in the data-visible which is target of the clicked link.

That worked brilliantly! Thanks a lot for the in-depth answer and explanation. — Tobias Krøgholt, Aug 15 '15 at 09:59
@TobiasKrøgholt You're welcome. You should use more `.data()` for future similar problems :) — Daniel Cheung, Aug 15 '15 at 10:20

Mohd Abdul Mujib · Answer 2 · 2015-08-15T10:03:09.867

Since you don't have a class to reference the clicked element, we shall have to use some sort of parent relation. The following method may prove very useful when we don't have control over the DOM being generated, So it can be done as follows ...

hideall = function(){
 jQuery("#home p ").next("a").each(function(e){ // accessing all the pairs of readmore elements and their respective companion elements
    readmore2 = jQuery(this).attr('href'); // get the readmoreid
    id2 = readmore2.substr(1); // extract the id
    jQuery("#"+id2).hide();
 });
}
jQuery("#home p ").next("a").on("click", function(e){
  e.preventDefault; // prevent the <a> tag from navigating
  readmore = jQuery(this).attr('href'); // get the readmoreid
  id = readmore.substr(1); // extract the id
  hideall();
  jQuery("#"+id).show();
});

jQuery(document).on( 'shown.bs.tab', function (e) {
   hideall();
});

Even if this solution works, this is not the right way to do it, I'd suggest you to use classes for a much efficient and better code.

Appreciate you getting back to me :-) Thanks! – Tobias Krøgholt Aug 15 '15 at 10:01 — Tobias Krøgholt, Aug 15 '15 at 10:01

score 0 · Answer 3 · answered Aug 15 '15 at 10:42

Wow I am way late on the answer, but I worked on it so I'll post anyways.

$(function(){    
$(".a").click(function () {
$(".p").toggle();
$(this).text(function(i, text){
return text === "Read more" ? "Hide text" : "Read more";
}) 
});

jsfiddle

Element manipulation with CSS/jQuery

3 Answers3

Explaination