CODEWITHSUNDEEP
javascriptjqueryhtmlcss
maudulus
maudulus

Reputation: 11035

Change plus ( + ) sign to bar ( | ) sign

I am just wanting to create something that when clicked will hide or show the text below the item. THE QUESTION that I have is "how would I change the + sign into a | sign when the h1 is clicked. The code:

HTML:

<h1>+ Welcome</h1>
<p>This is the welcome greeting</p>

CSS: 

p {
    display: none; 
}

JavaScript: 

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();              
    } else {
        $('p').show();      
    }
});

JsFiddle

Upvotes: 0

Views: 141

Answers (7)

Jon
Jon

Reputation: 2681

If you do not want to change the markup and want the flexibility of being able to change the other text in the h1 without modifying your JavaScript, then using the JavaScript replace function could be a alternative.

$( "h1" ).on('click', function() {
    var heading = $(this).html();
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).html(heading.replace('|', '+')); 
    } else {
        $('p').show();
        $(this).html(heading.replace('+', '|')); 
    }
});

Upvotes: 0

Oriol
Oriol

Reputation: 288510

Try using ::before pseudo-element:

<div class="wrapper">
    <h1>Welcome</h1>
    <p>This is the welcome greeting</p>
</div>

.wrapper > h1:before {
  content: '|';
}
.wrapper.hide > h1:before {
  content: '+';
}
.wrapper.hide > p {
    display: none;
}

$(".wrapper").addClass('hide').each(function() {
    var $wrapper = $(this);
    $wrapper.children('h1').on('click', function() {
        $wrapper.toggleClass('hide');
    });
});

Demo

Upvotes: 2

shyammakwana.me
shyammakwana.me

Reputation: 5752

DEMO

Here is your code

HTML

<h1><span>+</span> Welcome</h1>
<p>This is the welcome greeting</p>

JavaScript

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).find('span').text('+');
    } else {
        $('p').show();      
        $(this).find('span').text('|');
    }
});

Upvotes: 0

frikkievb
frikkievb

Reputation: 481

Try to put the "+" inside it's own <span> tag.

HTML:

<h1> <span id='symbol' class="plus">+</span> Welcome </h1>

jQuery:

$("h1").click(function(){
    var span = $("#symbol");

    if(span.hasClass("plus")){
        span.html("|");
        span.removeClass("plus");
        span.addClass("pipe");
    }else{
        span.html("+");
        span.removeClass("pipe");
        span.addClass("plus");
    }
});

Hope it helps!

Upvotes: 1

dashtinejad
dashtinejad

Reputation: 6253

You should put your + to an element and change it:

HTML

<h1><span>+</span> Welcome</h1>
<p>This is the welcome greeting</p>

jQuery

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).find('span').text('+');
    } else {
        $('p').show();
        $(this).find('span').text('|');      
    }
});

jsFiddle Demo.

Upvotes: 3

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

Since it's the h1 that's clicked, you can use $(this) inside your function.

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).text('+ Welcome');
    } else {
        $('p').show();
        $(this).text('| Welcome');    
    }
});

DEMO

Upvotes: 4

Jean-Karim Bockstael
Jean-Karim Bockstael

Reputation: 1405

You can access the content of a tag with .text() (doc):

$( "h1" ).click(function() {
    if ($('p').is(':visible')){
        $('p').hide();
        $(this).text("+ Welcome");
    } else {
        $('p').show();
        $(this).text("| Welcome");
    }
});

However, as others pointed out, this would be easier if you moved the special character inside its own <span> element. Also consider giving an id to the elements you want to interact with, as $("p") will match all the p elements in the page.

Upvotes: 1

Related Questions