onClick toggle only selected element

Question

I have been working on some toggle based buttons. I have two buttons one is buy and other is the demo. I have managed to write a bit of jQuery code for the toggle. everything is working fine except when I click on single button both of them are being toggled. But I want only one of it to be toggled. One other minor thing is when I click on the button some weird animation is being played I guess that is because I have used the toggle. Here is the Fiddle

$(document).ready(function($) {
  $('.theme-options').find('#buy').click(function() {
    $('.buy span').toggle(200);
  });

  $('.theme-options').find('#demo').click(function() {
    $('.demo span').toggle(200);
  });
});

body { position: relative; }
.theme-options {
  position: fixed;
  right: 0;
  top: 40px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.theme-options span {
  display: flex;
  align-items: center;
}
.buy,
.demo {
  padding: 20px 10px;
  display: block;
}
.buy span,
.demo span {
  display: none;
}
a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
}

<div class="theme-options">
  <span id="buy">User
<a href="#" class="buy theme">
  <span>Want to buy this theme</span>
  </a>
  </span>
  <span id="demo">User
<a href="#" class="demo theme">
  <span>Want to request a demo</span>
  </a>
  </span>
</div>

I dont see what you mean. When I click the first button, the first button toggles. When I click the second button, the second button toggles. No idea what you mean with "both of them are being toggeled" — Tim Gerhard, Mar 28 '18 at 06:10
When you click on the first button the second button is also being toggled but not showing content. I want the send button to stay in the default place. — Mohammed Wahed Khan, Mar 28 '18 at 06:12
No it is not. The thing is, your "animation" that shows the content pushes the buttons away from the right side. The problem lies on your animation. not the toggling itsself — Tim Gerhard, Mar 28 '18 at 06:14
@TimGerhard Can you help me on that? I have only bit of knowledge regarding JQuery — Mohammed Wahed Khan, Mar 28 '18 at 06:15
It's a CSS issue Mohammed. Not a jQuery one. I may help you let me check... — Santiago Baigorria, Mar 28 '18 at 06:20
Well of course I could help but I dont know how your animation is supposed to look — Tim Gerhard, Mar 28 '18 at 06:21
@TimGerhard It is just like two icons on the top right in fixed position. When you click on the icon the text rolls out from right to left.one can buy the theme or request demo. but I want this thing in mobile so I am not applying any hover effect. — Mohammed Wahed Khan, Mar 28 '18 at 06:25

Hiren Vaghasiya · Accepted Answer · 2018-03-28T06:30:29.993

It is due to theme-options class taking width which is applying to both element so both will move on on toggle you can seperate them in different div and apply this

$(document).ready(function($) {
    $('.theme-options').find('#buy').click(function(){

      $('.buy span').toggle(500);

    });
    
      $('.theme-options2').find('#demo').click(function(){

      $('.demo span').toggle(500);

    });
  });

body {
  position: relative;
}
.theme-options {
  position: fixed;
  right: 0px;
  top: 40px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.theme-options span {
  display: flex;
  align-items: center;
}
.theme-options2 {
  position: fixed;
  right: 0px;
  top: 80px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.theme-options2 span {
  display: flex;
  align-items: center;
}
.buy, .demo {
  padding: 20px 10px;
  display: block;
}
.buy span {
 display: none;
}
.demo span {
 display: none;
}
a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="theme-options">
<span id="buy">User
<a href="#" class="buy theme">
  <span>Want to buy this theme</span>
  </a>  
</span>
</div>
<div class="theme-options2">
<span id="demo">User
<a href="#" class="demo theme">
  <span>Want to request a demo</span>
  </a>  
</span>
</div>

yes in toggle function you can apply value for animation check updated fiddle — Hiren Vaghasiya, Mar 28 '18 at 06:30
One last thing as the toggle is making the animation weird can we use some other animation? — Mohammed Wahed Khan, Mar 28 '18 at 06:35
For that you need to give specific width to element but i think this is good way then it — Hiren Vaghasiya, Mar 28 '18 at 07:39

score 1 · Answer 2 · edited Mar 28 '18 at 06:45

CSS

body {
    position: relative;
}

.theme-options {
    position: fixed;
    height: 40px;
    right: 0;
    top: 40px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

    .theme-options span {
        display: flex;
        align-items: center;
    }

.theme-options1 {
    position: fixed;
    height: 40px;
    right: 0;
    top: 80px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

    .theme-options1 span {
        display: flex;
        align-items: center;
    }

.buy, .demo {
    padding: 20px 10px;
    display: block;
}

    .buy span, .demo span {
        display: none;
    }

a {
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
}

JS

$(document).ready(function ($) {
    $('.theme-options').find('#buy').click(function () {
        $('.buy span').toggle(200);
    });

    $('.theme-options1').find('#demo').click(function () {
        $('.demo span').toggle(200);
    });
});

HTML

<div class="theme-options">
    <span id="buy">User
        <a href="#" class="buy theme">
            <span>Want to buy this theme</span>
        </a>
    </span>
</div>
<div class="theme-options1">
    <span id="demo">User
        <a href="#" class="demo theme">
            <span>Want to request a demo</span>
        </a>
    </span>
</div>

Fiddle

One last thing as the toggle is making the animation weird can we use some other animation? — Mohammed Wahed Khan, Mar 28 '18 at 06:35
Use whatever animation you want, I get the impression you're wanting us to do the leg work here. Do it yourself, or at least have a go. — Xoog, Mar 28 '18 at 06:41

Athul Nath · Answer 3 · 2018-03-28T06:35:35.277

1

You can Try this way

$('#buy,#demo').click(function(){
        $(this).find('span').fadeToggle(300);
    });

body {
  position: relative;
}
.theme-options {
  position: fixed;
  right: 0;
  top: 40px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.theme-options:nth-of-type(2) {
 top: 90px;
}
.theme-options span {
  display: flex;
  align-items: center;
}
.buy, .demo {
  padding: 20px 10px;
  display: block;
}
.buy span, .demo span {
 display: none;
}
a {
  text-decoration: none;
  color: #000;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="theme-options">
<span id="buy">User
<a href="#" class="buy theme">
  <span>Want to buy this theme</span>
  </a>  
</span>

</div>
<div class="theme-options">
<span id="demo">User
<a href="#" class="demo theme">
  <span>Want to request a demo</span>
  </a>  
</span>
</div>

edited Mar 28 '18 at 06:35

answered Mar 28 '18 at 06:27

Athul Nath

2,536
1
15
27

It is working with animation but as I mentioned in the question it is going out with some weird movement. can we fix it. – Mohammed Wahed Khan Mar 28 '18 at 06:31
You can try with `fadeToggle(100)` @Mohammedwahedkhan See updated snippet – Athul Nath Mar 28 '18 at 06:35
One last thing as the toggle is making the animation weird can we use some other animation? – Mohammed Wahed Khan Mar 28 '18 at 06:36
@Mohammedwahedkhan You can use ` transform: translateX();` – Athul Nath Mar 28 '18 at 06:39
I tried it Please read the first answer of this question : ) https://stackoverflow.com/questions/31071046/fixed-element-in-transform-translate-container-not-working – Mohammed Wahed Khan Mar 28 '18 at 06:44

score 1 · Answer 4 · answered Mar 28 '18 at 06:48

    $(document).ready(function($) {
      $('.theme-options').find('#buy').click(function(){

        $('.buy span').toggle(200);
        if($('.demo span').css('display') == 'inline'){
          $('.demo span').toggle(200);
        }

      });

        $('.theme-options').find('#demo').click(function(){

        $('.demo span').toggle(200);
        if($('.buy span').css('display') == 'inline'){
          $('.buy span').toggle(200);
        }
      });
    });

is it what you want? you need to judge whether another item is expand

onClick toggle only selected element

4 Answers4