Billing Systems Billing Systems - 6 months ago 12
jQuery Question

How to hide content of previous and next siblings in a certain wrapper but not of clicked div in jQuery?

I wrote a function for this purpose but it is not achieving my targets. Currently it is hiding either all previous or all next individually. But when i apply both at a time they hide even that div's content. Kindly help in this regard.

Html Part is

<div id="improveformob" class="improve-wrapper">
<div id="integrity" onclick="toggle_visibility(this);" class="box">
<div class="icon">
<span>I</span>
</div>
</div>
<div class="hide">
<h1 style="text-align: center; color: #1D99D8;">Integrity</h1>
<p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
</div>
<div id="inclusiveness" onclick="toggle_visibility(this);" class="box">
<div class="icon">
<span>I</span>
</div>
</div>
<div class="hide">
<h1 style="text-align: center; color: #1D99D8;">Inclusiveness</h1>
<p style="text-align:center;">We work as a team and want others to succeed. We care about our customers, employees, work environment and social responsibilities.</p>
</div>
<div class="box">
<div class="icon">
<span>
<img src="images/new_slices/improve-m.png" width="80" />
</span>
</div>
</div>
<div id="passion" onclick="toggle_visibility(this);" class="box">
<div class="icon">
<span>P</span>
</div>
</div>
<div class="hide">
<h1 style="text-align: center; color: #1D99D8;">Passion</h1>
<p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
</div>
<div id="responsivness" onclick="toggle_visibility(this);" class="box">
<div class="icon">
<span>R</span>
</div>
</div>
<div class="hide">
<h1 style="text-align: center; color: #1D99D8;">Responsiveness</h1>
<p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
</div>
<div id="openness" onclick="toggle_visibility(this);" class="box">
<div class="icon">
<span>O</span>
</div>
</div>
<div class="hide">
<h1 style="text-align: center; color: #1D99D8;">Openness</h1>
<p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
</div>
<div id="valcreation" onclick="toggle_visibility(this);" class="box">
<div class="icon">
<span>V</span>
</div>
</div>
<div class="hide">
<h1 style="text-align: center; color: #1D99D8;">Value Creation</h1>
<p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
</div>
<div id="excellence" onclick="toggle_visibility(this);" class="box">
<div class="icon">
<span>E</span>
</div>
</div>
<div class="hide">
<h1 style="text-align: center; color: #1D99D8;">Excellence</h1>
<p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
</div>
</div>


JS

function toggle_visibility(id) {
var e = id.id;
$('#' + e).next().removeClass();
//$('#' + e).not(this).siblings().addClass("hide");
$('#' + e).prevAll().addClass('hide');
$('#' + e).nextAll().addClass('hide');
}


Kindly help in this regard that where i am lacking the logic.

Answer

function toggle_visibility(id) {
  console.log(id)
    var e = id.id;
    $('.box').next().addClass('hide');//add the class hide to all so al will be hidden
    $(id).next().removeClass('hide');//then remove the hide class from the target div to show it
    //$('#' + e).not(this).siblings().addClass("hide");
}
.red{color:red}
.hide{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="improveformob" class="improve-wrapper">
    <div id="integrity" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>I</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Integrity</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="inclusiveness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>I</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Inclusiveness</h1>
        <p style="text-align:center;">We work as a team and want others to succeed. We care about our customers, employees, work environment and social responsibilities.</p>
    </div>
    <div class="box">
        <div class="icon">
            <span>
                                    <img src="images/new_slices/improve-m.png" width="80" />
                                </span>
        </div>
    </div>
    <div id="passion" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>P</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Passion</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="responsivness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>R</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Responsiveness</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="openness" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>O</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Openness</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="valcreation" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>V</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Value Creation</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
    <div id="excellence" onclick="toggle_visibility(this);" class="box">
        <div class="icon">
            <span>E</span>
        </div>
    </div>
    <div class="hide">
        <h1 style="text-align: center; color: #1D99D8;">Excellence</h1>
        <p style="text-align:center;">We act with integrity and internal code of honor by always doing the right thing. We honor our commitments and never sacrifice our standards.</p>
    </div>
</div>

  1. Add display none to all information div
  2. Add hide class to all information div on click
  3. Remove the class hide from the target div to show the target div
Comments