/    Sign up×
Community /Pin to ProfileBookmark

Hide and show element

### this script is working fine. But I have 2 Divs with same classname. When i click edit button of first div then both first and second div start to display. I want to display first div element on click of first div edit button. And second div on click of second edit button. Without repeating the code.


`<script>
$(document).ready(function () {
$(“.insert-data”).hide();
$(“.btn-edit”).click(function () {
$(“.show-data”).hide();
$(“.insert-data”).show();
$(“.btn-edit”).hide();
});
$(“.btn-cancel”).click(function () {
$(“.insert-data”).hide();
$(“.show-data”).show();
$(“.btn-edit”).show();
});
});
</script>`

to post a comment
Full-stack DeveloperJavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumMar 17.2021 — Please add the HTML.
Copy linkTweet thisAlerts:
@PrashantraoauthorMar 17.2021 — @Sempervivum#1629359
``<i>
</i> &lt;div class="email"&gt;

&lt;form action=""&gt;
&lt;div class="form-group"&gt;
&lt;label for="exampleInputEmail1" style="width: 100%;"&gt;Email&lt;span
class="float-right"&gt;&lt;a class="btn btn-edit"&gt;Edit&lt;/a&gt;&lt;/span&gt;&lt;/label&gt;

&lt;div class=" show-data"&gt;
&lt;div class="row mb-3"&gt;
&lt;label for="inputEmail3" class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
&lt;div class="col-sm-10"&gt;
&lt;span class="form-control" id="inputEmail3"&gt;[email protected]&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;


&lt;div class="insert-data"&gt;
&lt;input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp"&gt;
&lt;small id="emailHelp" class="form-text text-muted"&gt;We'll never share your email
with anyone else.&lt;/small&gt;

&lt;div class="save-cancel text-center"&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Save&lt;/button&gt;
&lt;span&gt;OR&lt;/span&gt;
&lt;a class="btn-cancel"&gt;Cancel&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/form&gt;
&lt;/div&gt;

&lt;div class="password"&gt;
&lt;form action=""&gt;
&lt;div class="form-group"&gt;
&lt;label for="exampleInputPassword1" style="width: 100%;"&gt;Password&lt;span
class="float-right"&gt;&lt;a class="btn btn-edit"&gt;Edit&lt;/a&gt;&lt;/span&gt;&lt;/label&gt;

&lt;div class=" show-data"&gt;
&lt;div class="row mb-3"&gt;
&lt;label for="inputPasword3" class="col-sm-2 col-form-label"&gt;Password&lt;/label&gt;
&lt;div class="col-sm-10"&gt;
&lt;span class="form-control" id="inputPasword3"&gt;*****&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;


&lt;div class="insert-data"&gt;
&lt;input type="password" class="form-control" id="exampleInputPassword1"
aria-describedby="emailHelp"&gt;


&lt;div class="save-cancel text-center"&gt;
&lt;button type="submit" class="btn btn-primary"&gt;Save&lt;/button&gt;
&lt;span&gt;OR&lt;/span&gt;
&lt;a class="btn-cancel"&gt;Cancel&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/form&gt;
&lt;/div&gt;<i>
</i>
``

**When I click email edit button I want to display email 'insert-data' and hide email 'show-data'

the code is working fine but I have same class in password div so when click edit Button both Email and Password div is displaying **
Copy linkTweet thisAlerts:
@SempervivumMar 17.2021 — Try this javascript, read the comments and modify the click for the cancel button on your own:
``<i>
</i> $(document).ready(function () {
$(".insert-data").hide();
$(".btn-edit").click(function () {
// step up in the tree and find element label
const lbl = $(this).closest('label');
// find sibling having class "show-data" and show it
lbl.siblings(".show-data").hide();
// find sibling having class "insert-data" and hide it
lbl.siblings(".insert-data").show();
lbl.hide();
});
$(".btn-cancel").click(function () {
$(".insert-data").hide();
$(".show-data").show();
$(".btn-edit").show();
});
});<i>
</i>
`</CODE>

BTW: Single backtics don't work reliably when posting code. You better use code tags: <C>
your code here` or triple backtics.

I edited your posting accordingly.
Copy linkTweet thisAlerts:
@PrashantraoauthorMar 17.2021 — @Sempervivum#1629369

I'm new here that's why I didn't knew about the backticks.

Thanks for the help. Its working now :
Copy linkTweet thisAlerts:
@VITSUSAMar 18.2021 — @Prashantrao#1629371 Different platforms use backticks for different purposes.

For example - Backticks are used in MySQL to select columns and tables from your MySQL source.
×

Success!

Help @Prashantrao spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...