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.
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/
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.